javascript - 通过部分属性值获取元素

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

使用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>