通过部分属性值获取元素

Question

几个小时以来我一直在摆弄它，我完全被它的行为难住了。在 JSFiddle 上，当我想要整个元素时，它似乎只返回 href 属性的值，但我仍然可以像使用元素一样使用 getAttribute(attribute) 。在用户脚本中，它似乎在调用函数后完全破坏了一切（因此转向 JSFiddle 并且没有结果显示在这里）。

为什么会这样？我怎样才能完成既定目标？

HTML:

<a name="edit-a" href="http://example.com/edit1">foo</a>
<a name="moo" href="http://example.com/edit2">roo</a>
<a name="edit-b" href="http://example.com/boo">bar</a>

JavaScript函数：

function getElementsByPartialValue(searchtext, searchattr, searchtag)
{
  var searchreturn = [];
  var searchreturni = 0;
  var tagmatches = document.getElementsByTagName(searchtag);
  for (var tagmatchesi = 0; tagmatchesi < document.getElementsByTagName(searchtag).length; tagmatchesi++)
  {
    if (tagmatches[tagmatchesi].getAttribute(searchattr).indexOf(searchtext) > -1)
    {
      searchreturn[searchreturni] = tagmatches[tagmatchesi];
      searchreturni++;
    }
  }
  return searchreturn;
}

检查结果：

alert(getElementsByPartialValue('edit', 'name', 'a')[0]);

结果(https://jsfiddle.net/81s4g42a/3/):

http://example.com/edit1

访问其他属性(https://jsfiddle.net/81s4g42a/4/):

alert(getElementsByPartialValue('edit', 'name', 'a')[0].getAttribute('name'));

结果：

edit-a

Answer 1

使用.querySelectorAll()，属性等于或开头后跟"-"选择器

var tagMatches = document.querySelectorAll("a[name|='edit']");
console.log(tagMatches);

<a name="edit-a" href="http://example.com/edit1">foo</a>
<a name="moo" href="http://example.com/edit2">roo</a>
<a name="edit-b" href="http://example.com/boo">bar</a>

Answer 2

像这样使用Attribute-Contains Selector：

var tagmatches = document.querySelectorAll(searchtag + "[" + searchattr + " *= '" + searchtext + "']");

function getElementsByPartialValue(searchtext, searchattr, searchtag)
{
  return document.querySelectorAll(searchtag + "[" + searchattr + " *= '" + searchtext + "']");
}

var elems = getElementsByPartialValue("edit", "name", "a");
for(var i = 0; i < elems.length; i++) {
  elems[i].style.background = "red";
}

<a name="edit-a" href="http://example.com/edit1">foo</a>
<a name="moo" href="http://example.com/edit2">roo</a>
<a name="edit-b" href="http://example.com/boo">bar</a>

Answer 3

我不想这么说，但它 returning "name"，而不是 "href"，如果你想要 url，你应该 return "href"，而不是 "name"... 检查您的脚本，您会发现您已将第一个标签的名称设置为 "edit-a"，因此当提醒 [0] 的名称时你得到 "edit-a"。如果你访问 [1]，你会得到 "edit-b"，如果你使用 1 而不是 'name'，你会得到“http://example.com/boo”，它会跳过第二个 "moo" 作为名称，因为您只搜索名称中带有 "edit" 的名称，而不是 href/url.

alert(getElementsByPartialValue('edit', 'name', 'a')[0].getAttribute('href'));

Answer 4

我测试了您的代码示例，发现您的代码执行得非常好。问题出在 "alert()" 函数，尝试使用控制台日志，您会发现您的代码确实有效。

通过部分属性值获取元素

Get Elements By Partial Attribute Value

html

javascript

userscripts