爲什麼document.querySelector（）會忽略直接指定的屬性？

Question

我最近發現了在Javascript中設置自定義DOM屬性的兩種方法之間的一個非常基本的區別。區別在於HTML5選擇器API如何與這些屬性進行交互（即，在document.querySelector（）和朋友中）。

<button id="b3">View</button> 

<script> 
document.getElementById('b3').shape = 'square'; 
console.log(document.querySelector('*[shape]')); // FAIL: returns null 

document.getElementById('b3').setAttribute('shape','square'); 
console.log(document.querySelector('*[shape]')); // WORKS: returns element 
</script> 

所以基本上，如果你申請屬性的元素，而無需使用.setAttribute()那麼以後您將無法通過選擇屬性名稱的元素。

順便說一句。此行爲是跨瀏覽器這讓我覺得這可能是由標準來解決一致的，但我不能看到它：

• http://www.w3.org/TR/css3-selectors/#attribute-selectors
• http://www.w3.org/TR/selectors-api/

選擇器API標準不似乎在乎：

選擇器允許表示元素的屬性。當使用 選擇器作爲表達式來匹配元素時，如果 元素的屬性與 屬性選擇器所表示的屬性匹配，則必須將 屬性選擇器視爲匹配元素。

整個屬性匹配規則似乎歸結爲「如果元素具有屬性」，你會覺得這將someElement.someAttribute = something滿足「具有屬性」，但爲準則，不管是什麼原因它不。

我的問題基本上是爲什麼區別？在所有主流瀏覽器（IE11，FF38和Chrome 43）中，它實際上是標準的一部分還是僅僅是一個相同的實現問題？

Answer 1

的原因很簡單 - getElementById和所有那些類型的返回Element對象（見規格：http://www.w3schools.com/jsref/met_document_getelementbyid.asp）

這意味着你的對象上設置屬性shape。然後你嘗試做一個查詢選擇器，但是你沒有修改被查詢的html。他們是不同的東西。