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

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的元素，其值为空格分隔的单词列表，其中一个单词为 ，正好为“value”。
• [attr|=value]表示具有属性名称attr的元素。它的值可以完全是“值”，或者可以从“值” 开始紧跟着“ - ”（U + 002D）。它可以用于语言 子代码匹配。
• [attr^=value]表示一个元素，其属性名称为attr，其值为前缀“value”。
• [attr$=value]表示一个元素，其属性名称为attr，其值为后缀“value”。
• [attr*=value]表示一个元素，其属性名称为attr，其值至少包含一个出现字符串“value”为 的子字符串。
• [attr operator value i]在右括号之前添加i会导致该值不区分大小写（对于ASCII范围内的字符 ）。