DOM：Document Object Model，文档对象模型。
作用：是一套规范文档内容的通用型标准。
1998年10月，DOM正式成为W3C的推荐标准。
第1级DOM（DOM Level 1，或DOM1）。为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。结合了Netscape及微软公司开发的DHTML（动态HTML）思想。
2000年11月，发布了第2级DOM（DOM Level 2，或DOM2）。在DOM1的基础上增加了样式表对象模型。
第3级DOM（DOM Level 3，或DOM3） 。在DOM2基础上增加了内容模型、文档验证以及键盘鼠标事件等功能。
直到目前为止，DOM几乎被所有浏览器所支持。
DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。
因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分 。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试title>
head>
<body>
<a href="#">链接a>
<p>段落...p>
body>
html>
在JavaScript中要对网页中的元素进行操作，可以利用document对象的getElementById()方法实现，但是此方法的返回值类型是什么？
<div id="test">div>
<script>
var test = document.getElementById('test');
console.log(test); // 输出结果：
console.log(test.__proto__); // 输出结果：HTMLDivElement { …… }
script>
<div id="test">div>
<script>
var test = document.getElementById('test');
console.log(test.nodeName); // 通过节点方式获取节点名，输出结果：DIV
console.log(test.tagName); // 通过元素方式获取标签名，输出结果：DIV
console.log(document.nodeName); // document属于节点，输出结果：#document
console.log(document.tagName); // document不属于元素，输出结果：undefined
script>
除了document和Element对象，还有其他几种类型的节点对象也继承Node对象，如文本（Text）、注释（Comment）等。
| Node.属性名 | 值 | 相应的对象 | 说明 |
|---|---|---|---|
| ELEMEN_NODE | 1 | Element | 元素节点 |
| ATTRIBUTE_NODE | 2 | Attr | 属性节点 |
| TEXT_NODE | 3 | Text | 文本节点 |
| COMMENT_NODE | 8 | Comment | 注释节点 |
| DOCUMENT_NODE | 9 | Document | 文档节点 |
document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。
| 方法 | 说明 |
|---|---|
| document.getElementById() | 返回对拥有指定id的第一个对象的引用 |
| document.getElementsByName() | 返回带有指定名称的对象集合 |
| document.getElementsByTagName() | 返回带有指定标签名的对象集合 |
| document.getElementsByClassName() | 返回带有指定类名的对象集合（不支持IE6~8） |
注意：除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。若要获取其中一个对象，可以通过下标的方式获取，默认从0开始。
document对象提供一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等。
| 属性 | 说明 |
|---|---|
| document.body | 返回文档的body元素 |
| document.documentElement | 返回文档的html元素 |
| document.forms | 返回对文档中所有Form对象引用 |
| document.images | 返回对文档中所有Image对象引用 |
通过document对象的方法与document对象的属性获取的操作元素表示的都是同一对象。
如document.getElementsByTagName(‘body’)[0]与document.body全等。
HTML5中为更方便获取操作的元素，为document对象新增了两个方法，分别为querySelector()和querySelectorAll()。
// 这两个方法的使用方式相同
console.log(document.querySelector('div')); // 获取匹配到的第1个div
console.log(document.querySelector('#box')); // 获取id为box的第1个div
console.log(document.querySelector('.bar')); // 获取class为bar的第1个div
console.log(document.querySelector('div[name]')); // 获取含有name属性的第1个div
console.log(document.querySelector('div.bar')); // 获取文档中class为bar的第1个div
console.log(document.querySelector('div#box')); // 获取文档中id为box的第1个div
在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的两个方法分别为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。
<ul id="ul">
<li>PHPli>
<li>JavaScriptli>
<ul>
<li>jQueryli>
ul>
ul>
<script>
var lis = document.getElementById('ul').getElementsByTagName('li');
console.log(lis);// 输出结果：(3) [li, li, li]
script>
除此之外，元素对象还提供了children属性用来获取指定元素的子元素。例如，获取上述示例中ul的子元素。
var lis = document.getElementById('ul').children;
console.log(lis); // 输出结果：(3) [li, li, ul]
HTMLCollection与NodeList对象的区别：
对于getElementsByClassName()方法、getElementsByTagName()方法和children属性返回的集合中可以将id和name自动转换为一个属性。
<li id="test" name="test">testli>
<script>
var lis1 = document.getElementsByTagName('li'); // 获取标签名为li的对象集合
var test = document.getElementById('test'); // 获取id为test的li元素对象
lis1.test === test; // 比较结果：true
var lis2 = document.getElementsByName('test'); // 获取name名为test的对象集合
lis1.test === lis2[0]; // 比较结果：true
script>
JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。
| 分类 | 名称 | 说明 |
|---|---|---|
| 属性 | innerHTML | 设置或返回元素开始和结束标签之间的HTML |
| 属性 | innerText | 设置或返回元素中去除所有标签的内容 |
| 属性 | textContent | 设置或者返回指定节点的文本内容 |
| 方法 | document.write() | 向文档写入指定的内容 |
| 方法 | document.writeln() | 向文档写入指定的内容后并换行 |
innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在开发时尽可能的使用innerHTML获取或设置元素的文本内容。
同时，innerHTML属性和document.write()方法在设置内容时有一定的区别，前者作用于指定的元素，后者则是重构整个HTML文档页面。因此，读者在开发中要根据实际的需要选择合适的实现方式
在DOM中，为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性，提供了操作的属性和方法。
| 分类 | 名称 | 说明 |
|---|---|---|
| 属性 | attributes | 返回一个元素的属性集合 |
| 方法 | setAttribute(name, value) | 设置或者改变指定属性的值 |
| 方法 | getAttribute(name) | 返回指定元素的属性值 |
| 方法 | removeAttribute(name) | 从元素中删除指定的属性 |
利用attributes属性可以获取一个HTML元素的所有属性，以及所有属性的个数length。
通过元素属性的操作修改样式。
元素样式语法：style.属性名称。
| 名称 | 说明 |
|---|---|
| background | 设置或返回元素的背景属性 |
| backgroundColor | 设置或返回元素的背景色 |
| display | 设置或返回元素的显示类型 |
| height | 设置或返回元素的高度 |
| left | 设置或返回定位元素的左部位置 |
| listStyleType | 设置或返回列表项标记的类型 |
| overflow | 设置或返回如何处理呈现在元素框外面的内容 |
| textAlign | 设置或返回文本的水平对齐方式 |
| textDecoration | 设置或返回文本的修饰 |
| textIndent | 设置或返回文本第一行的缩进 |
| transform | 向元素应用2D或3D转换 |
<div id="box">div>
<script>
var ele = document.getElementById('box'); // 获取元素对象
ele.style.width = '100px';
ele.style.height = '100px';
ele.style.backgroundColor = 'red';
ele.style.transform = 'rotate(7deg)';
script>
CSS中的float样式与JavaScript的保留字冲突，在解决方案上不同的浏览器存在分歧。IE911、Chrome、FireFox可以使用“float”和“cssFloat”，Safari浏览器使用“float”，IE68则使用“styleFloat”。
一个元素的类选择器可以有多个，在开发中如何对选择器列表进行操作？
若一个div元素的class值为“box header navlist title”，如何删除header？
除此之外，classList属性还提供了许多其他相关操作的方法和属性。
| 分类 | 名称 | 说明 |
|---|---|---|
| 属性 | length | 可以获取元素类名的个数 |
| 方法 | add() | 可以给元素添加类名，一次只能添加一个 |
| 方法 | remove() | 可以将元素的类名删除，一次只能删除一个 |
| 方法 | toggle() | 切换元素的样式，若元素之前没有指定名称的样式则添加，如果有则移除 |
| 方法 | item() | 根据接收的数字索引参数，获取元素的类名 |
| 方法 | contains() | 判断元素是否包含指定名称的样式，若包含则返回true，否则返回false |
标签栏切换效果
编写HTML，实现标签栏的结构与样式的设计，其中class等于current表示当前显示的标签，默认是第一个标签。
获取所有的标签与标签对应的显示内容。
遍历并为每个标签添加鼠标滑过事件，在事件的处理函数中，遍历标签对应的所有显示内容，当鼠标滑过标签时，通过classList的add()方法添加current，否则通过remove()方法移出current。
由于HTML文档可以看做是一个节点树，因此，可以利用操作节点的方式操作HTML中的元素。
| 属性 | 说明 |
|---|---|
| firstChild | 访问当前节点的首个子节点 |
| lastChild | 访问当前节点的最后一个子节点 |
| nodeName | 访问当前节点名称 |
| nodeValue | 访问当前节点的值 |
| nextSibiling | 返回同一树层级中指定节点之后紧跟的节点 |
| previousSibling | 返回同一树层级中指定节点的前一个节点 |
| parentNode | 访问当前元素节点的父节点 |
| childNodes | 访问当前元素节点的所有子节点的集合 |
childNodes属性与前面学习过的children属性的区别。
childNodes属性在IE6~8不会获取文本节点，在IE9及以上版本和主流浏览器中则可以获取文本节点。
此外，由于document对象继承自Node节点对象，因此document对象也可以进行以上的节点操作。
// 访问document节点的第1个子节点
document.firstChild; // 访问结果：
// 访问document节点的第2个子节点
document.firstChild.nextSibling; // 访问结果：……
在获取元素的节点后，还可以利用DOM提供的方法实现节点的添加，如创建一个li元素节点，为li元素节点创建一个文本节点等。
| 方法 | 说明 |
|---|---|
| document.createElement() | 创建元素节点 |
| document.createTextNode() | 创建文本节点 |
| document.createAttribute() | 创建属性节点 |
| appendChild() | 在指定元素的子节点列表的末尾添加一个节点 |
| insertBefore() | 为当前节点增加一个子节点（插入到指定子节点之前） |
| getAttributeNode() | 返回指定名称的属性节点 |
| setAttributeNode() | 设置或者改变指定名称的属性节点 |
create系列的方法是由document对象提供的，与Node对象无关。
语法：removeChild()和removeAttributeNode()方法实现。
返回值：是被移出的元素节点或属性节点。
[外链图片转存中…(img-oilsdVuf-1695797805052)]
[外链图片转存中…(img-ho5MC4TT-1695797805053)]