通过部分属性值获取元素

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

使用属性包含选择器，如下所示：

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 2

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

我讨厌这样说，但是它返回的是“名称”，而不是“ href”，如果您想要的URL，则应该返回“ href”，而不是“ name” ...检查脚本，您会发现自己ve将第一个标签的名称设置为“ 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（）”函数上，尝试使用控制台日志，您将看到您的代码确实有效。