javascript - 如何获取具有特定数据属性的html节点？

在javaScript中，获取我知道属性名称和属性值的特定html节点的最佳方法是什么，而许多html节点可以具有相同的属性名称？属性名称是数据属性。

这是一些示例html：

<div class="misc1" data-test="value1" data-test="value2"></div>
<div class="misc2" data-test="value3" data-test="value4"></div>

如果要使用data-test="value3"获取html节点，是否需要执行以下操作：

  var elements = document.querySelectorAll("[data-test]");
  for (i = 0; i < elements.length; i++) {
    for(x = 0; x < elements[i].attributes.length; x++) {
        //Do an attribute value check??
    }
  }

我可以在代码方面寻求帮助吗？我不想使用jQuery吗？

最佳答案

您的attribute selector可以变得更加具体，如下所示：

var elements = document.querySelectorAll('[data-test="value3"]');

属性选择器还有其他多种变体：


  
  [attr]表示属性名称为attr的元素。
  [attr=value]表示元素的属性名称为attr，其值恰好是“值”。
  [attr~=value]表示属性名称为attr的元素，其值是用空格分隔的单词列表，其中一个是
  完全是“价值”。
  [attr|=value]表示属性名称为attr的元素。其值可以完全是“值”，也可以以“值”开头
  紧随其后的是“-”（U + 002D）。它可以用于语言
  子代码匹配。
  [attr^=value]表示属性名称为attr且其值以“ value”为前缀的元素。
  [attr$=value]表示一个元素，其属性名称为attr，其值后缀“ value”。
  [attr*=value]表示一个属性名称为attr且其值至少包含一次出现的字符串“ value”的元素，作为
  子字符串。
  [attr operator value i]在右括号之前添加i会导致不区分大小写地比较值（对于字符
  在ASCII范围内）。

关于javascript - 如何获取具有特定数据属性的html节点？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33535611/