为什么下面的javaScript代码不返回任何元素？

为什么下面的javaScript代码不返回任何元素？为什么下面的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);

感谢。

来源

2015-11-05 user3736648

http://stackoverflow.com/help/mcve – hendry

只看到完成的html：你的DIV刚才第一个属性 – Grundy

@hendry：不知道你为什么链接到帮助文章。在这个问题中你没有看到MCVE吗？ – BoltClock

当我在Chrome中的jsFiddle中运行实验时，如果具有给定属性名称的FIRST属性与您的选择器匹配，那么document.querySelectorAll()只会在给定元素上找到匹配项。或者说，换一种说法，如果您有多个相同属性的定义，document.querySelectorAll()在第一个中找不到匹配。

我还没有测试过其他浏览器，看看它们在这方面的表现如何，但这足以告诉你使用多个相同属性名称的定义就像你一样有问题。

此外，Section 8.1.2.3 about Attributes in the HTML5 spec here明确指出，您不必在同一个标记中具有重复的属性。

在同一个开始标记中绝不能有两个或多个属性，其名称是ASCII码不区分大小写匹配的对象。

我不知道是什么问题，你真的想在这里解决，但通常的做法是由多个值与像分号分隔符分隔同一属性的定义上使用多个值然后你可以使用*=运营商在选择查找包含一个子像这样的属性：

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

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

来源

2015-11-05 03:45:53 jfriend00

可能按规格只适用于第一？接下来忽略？ – Grundy

@Grundy：[Yes。]（http://www.w3.org/TR/html5/syntax.html#attribute-name-state） – BoltClock

或者，使用空格作为分隔符允许您使用'[data- custom-test〜= test2]'，确保你不会错误地匹配部分值，但它有保留空格字符作为分隔符的警告。 – BoltClock

的问题是，元素不能有重复的属性（see a similar question about it）。在尤卡K. Korpela的回答提供的W3C link：

有绝不能在同一个起始标签，其名称为对方一个ASCII不区分大小写的匹配两个或多个属性。

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

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

来源

2015-11-05 03:50:24

为什么下面的javaScript代码不返回任何元素？

回答

相关问题