Question

在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吗？

Answer 1

您的attribute selector可以更加具体：

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

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

[attr]表示属性名称为attr。
的元素
[attr=value]表示属性名称为attr且其值正好为“value”的元素。

[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范围内）。

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

1 个答案: