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

回炉重学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/DOM/Element/Node，其实讨论的本质就是JavaScript对DOM的操作。

其中DOM是Element的扩展实现，Element是Node接口的一种实现，而最基本的Node接口是继承于底层的EventTarget事件接口。

DOM里相关事件事件监听和操作是，继承于EventTarget实现的。

DOM里相关属性和内容操作是，继承于Element实现的。

DOM里相关节点操作是，继承于Node实现的。