Question

为什么以下javaScript代码没有返回任何元素？

这是html代码：

<div class="misc" data-custom-test="test1" data-custom-test="test2"></div>

这是javaScript代码：

var elements = document.querySelectorAll('[data-custom-test="' + "test2" + '"]');
alert(elements.length);

感谢。

Answer 1

当我在Chrome中的jsFiddle中运行实验时，如果具有给定属性名称的FIRST属性是与您的选择器匹配的属性，document.querySelectorAll()将只找到给定元素的匹配项。或者说，换句话说，如果您对同一属性有多个定义，document.querySelectorAll()除了第一个属性之外没有找到任何匹配。

我没有测试其他浏览器以查看它们在这方面的行为，但这足以告诉您使用相同属性名称的多个定义时遇到问题。

此外，Section 8.1.2.3 about Attributes in the HTML5 spec here明确指出您不会在同一标记中包含重复属性。

同一个开始标记上绝不能有两个或更多属性 name是彼此不区分大小写的ASCII匹配。

我不知道你在这里要解决的问题是什么，但通常的做法是在同一个属性定义中使用多个值，方法是用分号分隔多个值，然后分号您可以在选择器中使用*=运算符来查找包含如下子字符串的属性：

<div class="misc" data-custom-test="test1;test2"></div>

var elements = document.querySelectorAll('[data-custom-test*="' + "test2" + '"]');
console.log(elements.length);

Answer 2

问题是元素不能具有重复属性（see a similar question about it）。来自Jukka K. Korpela提供的W3C link答案：

同一个开始标记上绝不能有两个或多个属性，这些属性的名称是彼此不区分大小写的ASCII匹配。

结果可能因浏览器而异，但似乎通常会直接忽略第二个属性。例如，如果您有重复的style属性，则会发生同样的事情：

<div style="color:red;" style="color:blue;">Is it red or blue?</div>

为什么以下javaScript代码没有返回任何元素？

2 个答案: