为什么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标准似乎并不关心：

  

选择器允许表示元素的属性。当一个   selector用作表达式以匹配元素，   必须考虑属性选择器以匹配元素   element有一个与the表示的属性匹配的属性   属性选择器。

整个属性匹配规则似乎归结为“如果元素具有属性”，并且您认为 someElement.someAttribute = something符合“拥有属性”的标准，但是无论什么原因都没有。

我的问题基本上是为什么不同？它实际上是所有主流浏览器（IE11，FF38和Chrome 43）中标准或相同实现怪癖的一部分吗？

Answer 1

原因非常简单 - getElementById并且所有类型都返回一个元素对象（请参阅规范：http://www.w3schools.com/jsref/met_document_getelementbyid.asp）

这意味着您在对象上设置属性shape。然后你尝试做一个查询选择器，但你还没有修改所查询的html。它们是不同的东西。