DOM元素点表示法直接选取的工作原理与全量属性查询

如何查询点表示法支持的DOM属性完整列表 #

不存在所谓的“内部隐藏列表”，所有支持通过点号直接访问的DOM元素/集合属性，全是W3C DOM规范明确定义在对应宿主对象原型上的自有属性，分两类查询即可：

• 针对document对象上的快捷访问属性：在浏览器控制台执行console.dir(Document.prototype)，展开后所有值为元素节点、元素集合的属性，就是document支持直接点选的全部属性。除了你已知的document.documentElement、document.head、document.body三个常用全局节点属性外，规范还定义了document.forms（全文档表单集合）、document.images（全文档img集合）、document.links（全文档带href的链接集合）、document.scripts（全文档script标签集合）、document.activeElement（当前聚焦元素）、document.doctype（文档DOCTYPE节点）等属性。
• 针对具体元素节点上的导航、快捷访问属性：同理在控制台执行console.dir(对应元素构造函数.prototype)即可查看，比如查看head元素支持的属性就打HTMLHeadElement.prototype，查看表格元素支持的属性就打HTMLTableElement.prototype，所有自有属性都会完整列出来，不需要刻意背诵。

网传“点选仅支持三个经典属性”的说法是错误的，只是这三个属性是最高频使用的全局唯一节点快捷方式，被很多入门教程单独拿出来举例而已。 #

点选方式的底层工作原理 #

核心本质非常简单：点号访问DOM节点的逻辑，和访问普通JavaScript对象的属性没有任何语法层面的差异，本质就是读取对应宿主对象原型上定义的getter（取值函数），不存在专门用于DOM选取的“点号特殊语法”。

你遇到的document.head.title无效问题，本质原因非常直接：在HTMLHeadElement的原型上，根本没有定义名为title的访问器属性。title这个属性的getter是定义在Document接口上的，它的内部逻辑是直接读取/写入文档中<title>标签的文本内容，而非返回title元素节点本身，自然无法通过head节点点出。

所有的点选DOM属性逻辑都是一致的：比如document.body能直接拿到body节点，是因为Document.prototype上定义了body的访问器属性，getter内部逻辑固定为“返回当前文档中第一个<body>元素节点，不存在则返回null”；document.head、document.documentElement的实现逻辑完全相同，都是规范提前写死的查找逻辑，不存在“点号自动识别标签名”的魔法。如果你尝试访问一个没有在原型上定义的属性，比如document.div，返回值必然是undefined，和你访问普通对象不存在的属性表现完全一致。 #

点表示法的导航规则与适用范围 #

没有模糊地带，直接记三条明确规则即可：

• 点表示法不支持自动补全DOM路径、直接通过标签名选取任意元素。所有能通过点号访问到的节点/集合，必须是规范在对应接口上明确定义了对应属性的，不存在“顺着标签名一路点就能选元素”的能力。比如你无法通过document.body.p拿到body下的p标签，因为HTMLBodyElement原型上根本没有定义p这个属性。
• 点表示法支持全层级DOM树导航，但必须使用规范定义的导航属性。所有元素节点都自带parentElement（父元素节点）、children（直接子元素集合）、firstElementChild（第一个直接子元素）、lastElementChild（最后一个直接子元素）、previousElementSibling（上一个相邻兄弟元素）、nextElementSibling（下一个相邻兄弟元素）这些导航属性，从document根节点出发，通过这些属性可以遍历到DOM树中任意一个元素节点，不存在层级限制。
• 点选属性的返回值不局限于全局唯一标签，一共分两类：一类是返回全局唯一节点的属性，比如document.documentElement对应唯一的<html>标签、document.head对应唯一的<head>标签、document.body对应唯一的<body>标签；另一类是返回符合规则的元素集合的属性，比如document.images返回全文档所有img标签的类数组集合、HTMLTableElement.prototype.rows返回表格内所有tr标签的集合、HTMLFormElement.prototype.elements返回表单内所有控件的集合。

注意：早年IE浏览器支持直接通过document.元素id/name访问对应节点的非标准行为，是IE的私有实现，现代浏览器仅做了部分兼容，不属于W3C规范定义的标准点选属性范畴，生产环境不建议使用。

内容的提问来源于stack exchange，提问作者4get