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>

Answer 2

使用.querySelectorAll()，属性等于或以"-"选择器

开头

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我不想这样说，但是它返回“名称”，而不是“href”，如果你想要你应该返回“href”的网址，而不是“名字”...检查你的脚本，你会发现您已将第一个标记的名称设置为“edit-a”，因此在提醒[0]的名称时，您将获得“edit-a”。如果您访问[1]，则会获得“edit-b”，如果您使用1代替“name”，则会获得“http://example.com/boo”，并且它会以“moo”作为名称跳过第二个，因为您'只搜索其名称中带有“edit”的内容，而不是其href / url。

{{1}}

Answer 4

我测试了您的代码示例并发现，您的代码执行得非常好。问题来自“alert（）”函数，尝试使用控制台日志，您将看到您的代码确实有效。

按部分属性值获取元素

4 个答案: