爲什麼下面的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代碼不返回任何元素？

回答

相關問題