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>