1、什么是DOM( Document Object Model（文档对象模型）)
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
什么是HTML DOM？
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
2、什么是DOM节点
**根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：**根据红宝书中的定义：DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
以下是HTML DOM节点树：
3、常见DOM节点类型
-
Node类型
- 每个节点都有一个nodeType属性，用于表明节点的类型
- 可以使用nodeName和nodeValue这两个属性来了解节点的具体信息
- 每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点
- 每个节点都有一个parentNode属性
- 常用的操作节点的方法，appendChild() removeChild() 等
-
Document类型
js通过Document类型表示文档；在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面，且document对象是window对象的一个属性，因此可以将其作为全局对象来访问。- 访问Document节点子节点的快捷方式：
documentElement: 该属性始终指向HTML页面中的元素；通过childNodes列表访问文档元素。document.documentElement === document.childNodes[0] // true(两者都指向<html>元素) document.body，指向元素- 常见DOM应用：查找元素：
getElementById(),getElementsByTagName() - 将输出流写入到网页中：
write(),writeIn()（两者的区别是，前者会原样写入，后者会在字符串末尾添加一个换行符(\n)）
- 访问Document节点子节点的快捷方式：
-
Element类型
- Element类型用于表现XML和HTML元素，提供对元素标签名、子节点及特性的访问
var div = document.getElementById("myDiv");
alert(div.id) // "myDiv"
div.id = "someOtherId"
- 每个元素都有一个或多个特性，操作特性的DOM方法主要有：
getAttribute()setAttribute()removeAttribute()
var div = document.getElementById("myDiv");
alert(div.getAttribute("id")) // "myDiv"
- Element类型是使用
attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NameNodeMap，与NodeList类似，元素的每一个特性都由一个Attr节点表示，每个节点都保存在NameNodeMap中。NameNodeMap对象拥有一些的方法：getNameItem(name)：返回nodeName属性等于name的节点；removeNameItem(name)：从列表中移除nodeName属性等于name的节点
var id = element.attributes.getNameItem("id").nodeValues;
- 可以通过document.createElement()方法创建新元素
先暂时写到这里。
4、如何计算DOM树的深度
<html lang="en">
<body>
<div>
<div>
<p>
<span><span></span></span>
</p>
<p></p>
<p><span></span></p>
</div>
</div>
</body>
</html>
<script>
// 求dom树的最大深度
const getDepth = (node => {
if (!node.childNodes || node.childNodes.length === 0) {
return 1;
}
const maxChildrenDepth = [...node.childNodes].map(v => getDepth(v));
return 1 + Math.max(...maxChildrenDepth);
})
console.log(getDepth(document.documentElement));
</script>