为什么 document.querySelector() 会忽略直接分配的属性？答案

【问题标题】：Why are directly assigned attributes ignored by document.querySelector()?为什么 document.querySelector() 会忽略直接分配的属性？
【发布时间】：2015-06-02 14:00:53
【问题描述】：

我最近发现了在 Javascript 中设置自定义 DOM 属性的两种方法之间的一个非常根本的区别。区别在于 HTML5 Selectors 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() 的情况下将属性应用于元素，那么您以后无法通过属性名称选择元素。

顺便说一句。这种行为在浏览器中是一致的，这让我认为它可能会被标准解决，但是我看不到它：

选择器 API 标准似乎并不关心：

选择器允许表示元素的属性。当一个选择器用作匹配元素的表达式，属性选择器必须被认为匹配一个元素，如果元素具有与由属性选择器。

整个属性匹配规则似乎归结为“如果元素具有属性”，您会认为someElement.someAttribute = something 会满足“具有属性”的标准，但无论出于何种原因它没有。

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

【问题讨论】：

这可能很有趣：stackoverflow.com/questions/19246714/…（以及它的副本）

标签： javascript html

【解决方案1】：

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

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

【讨论】：

您是说除非在 DTD 中声明 element[keyname]，否则默认情况下它不会被视为 DOM 属性，或者只是所有内容都是 Element 引用上的属性（那么 'id' 是什么）？
快速回答是，.setAttribute() 设置 DOM 属性，而 .shape = 设置对象的 shape 属性。
快速回答似乎不完整。如果我这样做element.id = 'something'，我肯定是在设置一个属性，而不是一个属性吗？ setAttribute() 会修改 DTD 还是什么？
设置属性实际上是在改变 DOM 上的值。查询是在 HTML 中搜索。如果要更改 HTML，则应使用setAttribute，以便稍后根据更改的属性进行查询。如果您只是想设置属性，那么您不应该使用查询选择器。 id 属性在这两个地方。将此视为解析 JSON 文件。你得到了初始值，以及解析的对象。设置属性改变JSON，设置属性改变对象。
我非常怀疑查询是“搜索 HTML”，DOM 是从 HTML 构建的活动对象。它应该是查询的目标，而不是 HTML“源代码”。