为何JavaScript DOM中Attr节点的parentNode属性始终返回null？

在JavaScript DOM中，Attr类继承自Node，其nodeType为Node.ATTRIBUTE_NODE。虽然Node.prototype包含parentNode属性，但所有Attr实例的parentNode始终返回null，且默认无法直接赋值（需通过Object.defineProperty修改属性描述符后才能赋值）。

一、parentNode属性行为测试（Chrome控制台） #

$0
// <section code="123" foo="bar">…</section>
$0.attributes[0]
// code="123"
$0.attributes[0].parentNode
// null
$0.attributes[0].parentNode = $0
// <section code="123" foo="bar">…</section>
$0.attributes[0].parentNode
// null
Object.defineProperty(Attr.prototype, 'parentNode', { writable: true, value: null });
// Attr {…}
$0.attributes[0].parentNode
// null
$0.attributes[0].parentNode = $0
// <section code="123" foo="bar">…</section>
$0.attributes[0].parentNode
// <section code="123" foo="bar">…</section>

二、Attr节点的复用限制测试 #

测试表明，Attr节点无法在不同元素间共享，必须显式克隆才能复用：

s = $0.cloneNode(false)
// <section code="123" foo="bar"></section>
s.attributes[0] == $0.attributes[0]
// false
s.attributes.removeNamedItem('code')
// code="123"
s.attributes.removeNamedItem('foo')
// foo="bar"
s
// <section></section>
s.attributes.setNamedItem($0.attributes[0])
// Uncaught DOMException: Failed to execute 'setNamedItem' on 'NamedNodeMap': The node provided is an attribute node that is already an attribute of another Element; attribute nodes must be explicitly cloned.

s.attributes.setNamedItem($0.attributes[0].cloneNode())
// null
s
// <section code="123"></section>

三、设计原因分析 #

尽管Attr节点只能属于单个元素，但它的parentNode仍被设计为null，核心原因如下：

• DOM层级模型的定位：早期DOM规范中，Attr节点并非文档树的正式组成部分，它是元素的附属属性条目，而非独立的树节点。parentNode用于表示文档树中的父子层级关系，返回null是为了明确Attr不属于树结构的层级链。

• 避免循环引用与简化实现：若Attr的parentNode指向所属元素，会形成元素→NamedNodeMap→Attr→元素的循环引用。早期JavaScript垃圾回收机制对循环引用处理能力较弱，这种设计能降低内存泄漏风险，同时简化DOM的层级遍历逻辑。

• 规范兼容性：从DOM Level 1到后续版本，Attr的parentNode返回null的行为始终保持一致。即使现代JS引擎已能处理循环引用，为兼容大量依赖该行为的旧代码，规范未做修改。

• 明确的替代方案：规范提供了Attr.ownerElement属性来获取Attr所属的元素，这个属性比parentNode更贴合Attr的附属定位，避免混淆文档树的层级关系。

内容的提问来源于stack exchange，提问作者Gunther Schadow