DOM是否支持polymorphism？能否认定DOM遵循OOP四大支柱？

你提到的三个支柱的理解是准确的，补充多态的具体实例如下：

• 继承（Inheritance）：DOM节点的层级继承体系非常清晰，比如HTMLButtonElement继承自HTMLElement，HTMLElement又继承自Element，最终向上到Node和EventTarget，子类可以直接复用父类的addEventListener()、cloneNode()等方法。
• 封装（Encapsulation）：Shadow DOM完美实现了封装，它将组件的内部DOM结构、样式和逻辑与外部文档隔离，外部无法直接访问Shadow DOM内部的元素，避免了样式污染和意外操作。
• 抽象（Abstraction）：Virtual DOM把真实DOM的复杂操作抽象成轻量的JS对象，开发者无需关注DOM更新的底层细节，只需要维护状态对应的Virtual DOM结构，由框架负责同步到真实DOM，大幅简化了开发流程。

多态（Polymorphism）的常见场景 #

DOM中多态的核心是同一方法在不同节点类型上表现出不同的行为逻辑，以下是几个典型例子：

1. textContent的差异化返回

   • 对于普通元素节点（如<div>、<p>），textContent会返回该节点及其所有子节点的文本内容，包括嵌套元素里的文本；
   • 对于Text类型的文本节点，textContent直接返回自身的文本内容；
   • 对于Comment注释节点，textContent返回注释的内容；
   • 对于<input>、<textarea>这类表单元素，textContent返回空字符串，它们的内容由value属性单独管理。

2. appendChild()的不同行为

   • 给普通元素节点调用appendChild()，会将子节点添加到该元素的内部末尾；
   • 给DocumentFragment调用appendChild()，节点会被添加到片段中，不会直接渲染到页面；
   • 给ShadowRoot调用appendChild()，节点会被添加到Shadow DOM内部，仅在组件内部可见。

3. 事件触发的多态响应
   所有DOM节点都继承了EventTarget的addEventListener()方法，但同一事件在不同节点上的触发逻辑不同：

   • 点击<input type="checkbox">时，除了触发click事件，还会触发change事件；
   • 点击<a>标签时，若未阻止默认行为，会触发页面跳转的默认动作，而普通<div>点击则不会有默认行为；
   • 触发submit事件时，<form>元素会默认提交表单，其他元素则不会有此默认行为。

4. getAttribute()的特殊处理

   • 对于<img>的src属性，getAttribute('src')返回的是你写的原始字符串（可能是相对路径），而img.src返回的是浏览器解析后的绝对URL；
   • 对于<select>元素，getAttribute('value')返回的是该元素的默认选中项的值，而普通元素的getAttribute('value')则直接返回属性的字面量。

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