blog
blog copied to clipboard
chenshenhai
回炉重学HTML/DOM/Element/Node之间的关系
前言
上个月写了一篇《从寻呼机到jQuery，一枚jQuery钉子户的独白》后，引起和技术小伙伴们的对HTML操作的讨论。
A君: jQuery直接操作HTML，让项目代码很难维护。
B君: React/Vue来管理 DOM和抹平DOM的操作，让开发者可以专注前端功能的实现。
C君: 用jQuery不能让页面的节点Node变化方便可控。
D君: 元素Element操作还是交给有模板能力的框架来操作。
讨论过后我回想对话，感觉有哪些不对，HTML,DOM, Node和Element在交谈中各种混用，到底讨论是否是同一个问题呢，抱着这个心态我查了MDN文档，算是初步理清楚了以上几个名词的含义。
什么是HTML
说起这个，应该很多人都很熟悉，就是HyperText Markup Language的缩写，翻译过来就是超文本标记语言。
HTML是用来描述网页的结构，如果把网页比喻成一个摩天大楼，那么HTML就是构成摩天大楼的钢筋混泥土结构。
同时一个HTML网页，可以描述成一个文档Document
图片来源于网络
图片来源于网络
什么是DOM
DOM，是Document Object Model的缩写，也就是文档对象模型，是对HTML构成网页文档的一种对象描述。换句话说，DOM是用于脚本程序(例如JavaScript)操作HTML网页的对象模型。
DOM 已经实现了对 HTML的节点操作、属性操作、事件操作和内容操作等接口和方法。可以这么说，所有对HTML进行动态脚本(例如JavaScript)的操作，都是对DOM的操作
如果把网页比喻成一个摩天大楼
-
HTML就构成摩天大楼的钢筋混泥土结构 -
DOM就是构建摩天大楼的包工头，做着管理操作HTML的事情。
DOM最常见的接口例如 document.getElementsByName('body')，查找整个DOM tree元素里的body元素
什么是Element
Element，通常称为“元素”，是对接口Node实现，是所有文档对象(DOM)的基类。
- 实现了节点接口
Node的接口操作，例如节点的增删改查。 - 扩展了对节点的属性操作，例如
className和attribute操作。
如果把网页比喻成一个摩天大楼
-
HTML就构成摩天大楼的钢筋混泥土结构 -
DOM就是构建摩天大楼的包工头 - 那么
Element是摩天大楼的装修工人，主要实现DOM中样式和内容的操作
例如操作DOM的样式
// 获取DOM中的div元素
var divElems = document.getElementsByTagName('div');
// 元素操作
// 给第一个div元素加上 bg-red 的样式名称
divElems[0].classList.add('bg-red')
什么是Node
Node是一个接口interface，同时也是继承父接口EventTarget。Node主要描述了节点操作的方法和属性，例如描述了操作父节点parentNode、子节点childNode和兄弟节点previousSibling/nextSibling的操作。
如果把网页比喻成一个摩天大楼
-
HTML就构成摩天大楼的钢筋混泥土结构 -
DOM就是构建摩天大楼的包工头 -
Element是摩天大楼的装修工人。 - 那么
Node就是构建摩天大楼的建筑工人，主要实现结构的操作
// 获取DOM中的div元素
var divElems = document.getElementsByTagName('div');
// 节点操作
// 给第一个div元素里追加一个 span的子节点
var span = document.createElement('span');
divElems[0].appendChild(span);
什么是 EventTarget
EventTarget 是一个事件接口，用于注册和触发事件描述的接口，也是最基本的事件监听器的接口。
如果把网页比喻成一个摩天大楼
-
HTML就构成摩天大楼的钢筋混泥土结构 -
DOM就是构建摩天大楼的包工头 -
Element是摩天大楼的装修工人。 -
Node就是构建摩天大楼的建筑工人。 - 那么
EventTarget就是构建摩天大楼的电力工人，主要是事件的注册和触发。
// 获取DOM中的div元素
var divElems = document.getElementsByTagName('div');
// 事件注册
var event = new Event('myclick');
divElems[0].addEventListener('myclick', function() {
alert('hello myclick event')
});
// 广播触发事件
divElems[0].dispatchEvent(event)
总结一下
我们回到前言中的语境里，讨论所谓的jQuery操作HTML，其实本质就是JavaScript对DOM的操作。
其中DOM是Element的扩展实现，Element是Node接口的一种实现，而最基本的Node接口是继承于底层的EventTarget 事件接口。
-
DOM里相关事件事件监听和操作是，继承于EventTarget实现的。 -
DOM里相关属性和内容操作是，继承于Element实现的。 -
DOM里相节点操作是，继承于Node实现的。
参考资料
- [1] MDN web docs: Web/HTML
- [2] MDN web docs: Web/API/Document_Object_Model
- [3] MDN web docs: Web/API/Element
- [4] MDN web docs: Web/API/Node
- [5] MDN web docs: Web/API/EventTarget
个人觉得这个抽象不准确 HTML 只是协议，协议不应该对应上具体的 “钢筋结构” 的
哈哈，多谢的指教，我这里的HTML描述有点歧义，应该是 HTML标记
个人觉得这个抽象不准确 HTML 只是协议，协议不应该对应上具体的 “钢筋结构” 的
哈哈，多谢的指教，我这里的
HTML描述有点歧义，应该是HTML标记
嗯嗯，是的~ HTML标记比较恰当