回炉重学HTML/DOM/Element/Node之间的关系

chenshenhai commented 5 years ago

前言

上个月写了一篇《从寻呼机到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

ComradeFu commented 4 years ago

个人觉得这个抽象不准确 HTML 只是协议，协议不应该对应上具体的 “钢筋结构” 的

chenshenhai commented 4 years ago

个人觉得这个抽象不准确 HTML 只是协议，协议不应该对应上具体的 “钢筋结构” 的

哈哈，多谢的指教，我这里的HTML描述有点歧义，应该是 HTML标记

ComradeFu commented 4 years ago

个人觉得这个抽象不准确 HTML 只是协议，协议不应该对应上具体的 “钢筋结构” 的

哈哈，多谢的指教，我这里的HTML描述有点歧义，应该是 HTML标记

嗯嗯，是的~ HTML标记比较恰当

chenshenhai / blog