前端三剑客
JavaScript

DOM

# DOM

# 1. DOM简介

DOM (Document Object Model) 是浏览器将 HTML 文档解析为树形结构的模型，每个节点都是一个 DOM 对象。DOM 提供了一组用来操作 HTML 文档的 API，包括属性、方法和事件。通过 DOM，JavaScript 可以动态地操作 HTML 文档的内容和结构。

HTML 文档和 DOM 树是一一对应的关系。
当 DOM 树被改变时，HTML 文档也会随之改变。
当需要对 HTML 中的内容进行动态改变时，可以使用 DOM 来进行操作。
DOM 提供了一组用来操作 HTML 文档的 API，即提供一套属性、方法和事件。
树上的每一个节点都是一个 DOM 对象，树的顶层为 document 对象，表示整个文档。

DOM

DOM（Document Object Model）提供了一组属性用于操作和访问HTML文档的各种元素和节点。以下是一些常用的DOM属性及其详细说明：

# 2. DOM节点分类

DOM（文档对象模型）中，节点是构成DOM树的基本单位。每个节点都有自己的类型，以下是节点的分类：

元素节点：HTML或XML文档中的标签元素，如<div>, <p>, <a>等。
文本节点：元素节点中的文本内容，例如<p>Hello World</p>中的"Hello World"。
注释节点：文档中的注释内容，例如。
属性节点：元素节点的属性，例如<div id="myDiv" class="myClass"></div>中的id和class属性。
文档节点：表示整个文档，例如HTML文档的根节点。
文档类型节点：表示文档的类型定义（DTD），如<!DOCTYPE html>。

每种节点类型都有特定的属性和方法，可以用来访问和操作对应的节点。

# 1. 元素节点（Element Node）

描述：元素节点是HTML或XML文档中的标签元素，如<div>, <p>, <a>等。
属性和方法：
- nodeName：返回节点的名称。
- nodeType：返回节点的类型，元素节点的值为1。
- childNodes：返回节点的子节点集合。
- parentNode：返回节点的父节点。
- attributes：返回节点的属性集合。
- innerHTML：获取或设置元素的 HTML 内容，不包括元素自身的标签。
- outerHTML：获取或设置元素的 HTML 标签及其内容，包括元素自身的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element Node Example</title>
</head>
<body>
    <div id="myElement" class="example" title="sampleTitle">
        <p>Child Node 1</p>
        <p>Child Node 2</p>
    </div>

    <script>
        var element = document.getElementById("myElement"); // 获取元素节点

        // 获取节点名称
        console.log(element.nodeName); // 输出 "DIV"

        // 获取节点类型
        console.log(element.nodeType); // 输出 1

        // 获取子节点集合
        var childNodes = element.childNodes;
        for (var i = 0; i < childNodes.length; i++) {
            console.log("Child Node " + i + ": " + childNodes[i].nodeName);
        }
        // 输出子节点的名称，可能包括文本节点和元素节点

        // 获取父节点
        console.log(element.parentNode.nodeName); // 输出 "BODY"

        // 获取属性集合
        var attributes = element.attributes;
        for (var j = 0; j < attributes.length; j++) {
            console.log(attributes[j].name + " = " + attributes[j].value);
        }
        // 输出属性名和值，如 "id = myElement", "class = example", "title = sampleTitle"
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

innerHTML 和 outerHTML 都是用于操作元素节点的属性，用来获取或设置元素的内容，但它们的作用范围不同。

# 1.1 `innerHTML`

描述：获取或设置元素的 HTML 内容，不包括元素自身的标签。
用法：element.innerHTML

示例：

<div id="myElement">
    <p>Hello World</p>
</div>

<script>
    var element = document.getElementById("myElement");

    // 获取 innerHTML
    console.log(element.innerHTML); // 输出 "<p>Hello World</p>"

    // 设置 innerHTML
    element.innerHTML = "<p>New Content</p>";
    console.log(element.innerHTML); // 输出 "<p>New Content</p>"
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

解释：innerHTML 获取或设置的是 <div> 标签内部的内容，不包括 <div> 标签本身。

# 1.2 `outerHTML`

描述：获取或设置元素的 HTML 标签及其内容，包括元素自身的标签。
用法：element.outerHTML

示例：

<div id="myElement">
    <p>Hello World</p>
</div>

<script>
    var element = document.getElementById("myElement");

    // 获取 outerHTML
    console.log(element.outerHTML); // 输出 "<div id="myElement"><p>Hello World</p></div>"

    // 设置 outerHTML
    element.outerHTML = "<section id='myElement'><p>New Content</p></section>";
    // 此时 element 已被替换成 <section> 元素
    console.log(document.getElementById("myElement").outerHTML); // 输出 "<section id="myElement"><p>New Content</p></section>"
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

解释：outerHTML 获取或设置的是整个 <div> 标签及其内部的内容。当使用 outerHTML 设置新的值时，整个元素会被替换，包括元素本身。

区别总结

范围不同：
- innerHTML 仅操作元素的内容，不包括元素自身的标签。
- outerHTML 操作元素及其内容，包括元素自身的标签。
设置时的行为不同：
- 设置 innerHTML 时，元素标签保持不变，内部内容被替换。
- 设置 outerHTML 时，整个元素（包括标签和内容）都会被替换成新的内容。
使用场景：
- 使用 innerHTML 可以方便地修改元素内部的内容，不改变元素本身的标签。
- 使用 outerHTML 可以直接替换整个元素，适用于需要完全改变元素的场景。

# 2. 文本节点（Text Node）

描述：文本节点包含文本内容，文本节点是元素节点的子节点，例如<p>Hello World</p>中的"Hello World"。
属性和方法：
- nodeValue：返回或设置节点的文本内容。
- nodeType：返回节点的类型，文本节点的值为3。
- parentNode：返回节点的父节点。

<div id="myElement">Hello World</div>

<script>
    var element = document.getElementById("myElement"); // 获取元素节点
    var textNode = element.firstChild; // 获取文本节点
    console.log(textNode.nodeValue); // 输出 "Hello World"，表示文本内容
    console.log(textNode.nodeType); // 输出 3，表示文本节点类型
</script>

1
2
3
4
5
6
7
8

# 3. 注释节点（Comment Node）

描述：注释节点包含注释内容，通常用于文档中的备注，例如。
属性和方法：
- nodeValue：返回或设置注释的内容。
- nodeType：返回节点的类型，注释节点的值为8。
- parentNode：返回节点的父节点。

<div id="myElement">
    <!-- 这是一个注释 -->
</div>

<script>
    var element = document.getElementById("myElement"); // 获取元素节点
    var commentNode = element.firstChild; // 获取注释节点
    console.log(commentNode.nodeValue); // 输出 " 这是一个注释 "，表示注释内容
    console.log(commentNode.nodeType); // 输出 8，表示注释节点类型
</script>

1
2
3
4
5
6
7
8
9
10

# 4. 属性节点（Attribute Node）

描述：属性节点是元素节点的属性，通常通过attributes属性集合访问，例如<div id="myDiv" class="myClass"></div>中的id和class属性。
属性和方法：
- nodeName：返回属性的名称。
- nodeValue：返回或设置属性的值。
- nodeType：返回节点的类型，属性节点的值为2。

<div id="myElement" class="myClass"></div>

<script>
    var element = document.getElementById("myElement"); // 获取元素节点
    var attr = element.attributes[1]; // 获取第二个属性节点
    console.log(attr.nodeName); // 输出 "class"，表示属性名称
    console.log(attr.nodeValue); // 输出 "myClass"，表示属性值
    console.log(attr.nodeType); // 输出 2，表示属性节点类型
</script>

1
2
3
4
5
6
7
8
9

# 5. 文档节点（Document Node）

描述：文档节点是整个文档的根节点，表示HTML或XML文档。
属性和方法：
- documentElement：返回文档的根元素（对于HTML文档是<html>）。
- nodeName：返回节点的名称，通常是#document。
- nodeType：返回节点的类型，文档节点的值为9。

<!DOCTYPE html>
<html>
<head>
    <title>Document Node</title>
</head>
<body>
</body>
</html>

<script>
    var docNode = document; // 获取文档节点
    console.log(docNode.nodeName); // 输出 "#document"，表示节点名称
    console.log(docNode.nodeType); // 输出 9，表示文档节点类型
    console.log(docNode.documentElement.nodeName); // 输出 "HTML"，表示根元素节点名称
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 6. 文档类型节点（DocumentType Node）

描述：文档类型节点表示文档的类型定义（DTD），如<!DOCTYPE html>。
属性和方法：
- name：返回文档类型的名称。
- nodeName：返回节点的名称，通常是DOCTYPE。
- nodeType：返回节点的类型，文档类型节点的值为10。

<!DOCTYPE html>
<html>
<head>
    <title>DocumentType Node</title>
</head>
<body>
</body>
</html>

<script>
    var docType = document.doctype; // 获取文档类型节点
    console.log(docType.name); // 输出 "html"，表示文档类型名称
    console.log(docType.nodeName); // 输出 "DOCTYPE"，表示节点名称
    console.log(docType.nodeType); // 输出 10，表示文档类型节点类型
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2. 常用DOM属性

笔记

常用DOM属性参考手册： https://www.w3cschool.cn/jsref/dom-obj-document.html (opens new window)

# 1. `document` 对象属性

document.body：获取页面的 <body> 元素。
```
console.log(document.body);
```
1
document.documentElement：获取页面的根元素 <html>。
```
console.log(document.documentElement);
```
1

document.title：获取或设置文档的标题。

console.log(document.title);
document.title = "新标题";

1
2

document.URL：获取当前文档的URL。
```
console.log(document.URL);
```
1
document.domain：获取或设置当前文档的域名。
```
console.log(document.domain);
```
1

document.cookie：获取或设置与当前文档相关的cookie。

console.log(document.cookie);
document.cookie = "username=John Doe";

1
2

document.referrer：获取访问当前页面的来源URL。
```
console.log(document.referrer);
```
1

# 2. 元素对象属性

element.id：获取或设置元素的id属性。

var element = document.getElementById("myElement");
console.log(element.id);
element.id = "newId";

1
2
3

element.className：获取或设置元素的class属性。

console.log(element.className);
element.className = "newClass";

1
2

element.classList：返回元素的类列表（DOMTokenList），提供add、remove、toggle等方法操作类。

element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("active");
console.log(element.classList);

1
2
3
4

element.tagName：返回元素的标签名。
```
console.log(element.tagName);
```
1
element.innerHTML：获取或设置元素的HTML内容（会解析HTML标签）。
```
console.log(element.innerHTML);
element.innerHTML = "<b>新内容</b>";
```
1
2
element.innerText：获取或设置元素的文本内容（不解析HTML标签会解析HTML实体）。
```
console.log(element.innerText);
element.innerText = "新文本内容";
```
1
2
element.textContent：获取或设置元素的文本内容（能获取隐藏元素的文本，但不解析HTML标签和HTML实体）。
```
console.log(element.textContent);
element.textContent = "新文本内容";
```
1
2

element.style：获取或设置元素的行内样式。

element.style.color = "red";
console.log(element.style.color);

1
2

element.src：获取或设置图像元素的src属性（适用于<img>标签）。

var img = document.getElementById("myImage");
console.log(img.src);
img.src = "newImage.png";

1
2
3

# 3. 节点相关属性

element.childNodes：获取元素的所有子节点（包括文本节点和注释节点）。

var nodes = element.childNodes;
for (var i = 0; i < nodes.length; i++) {
    console.log(nodes[i]);
}

1
2
3
4

element.children：获取元素的所有子元素节点（不包括文本节点和注释节点）。

var children = element.children;
for (var i = 0; i < children.length; i++) {
    console.log(children[i]);
}

1
2
3
4

element.firstChild：获取元素的第一个子节点。
```
console.log(element.firstChild);
```
1
element.lastChild：获取元素的最后一个子节点。
```
console.log(element.lastChild);
```
1
element.firstElementChild：获取元素的第一个子元素节点。
```
console.log(element.firstElementChild);
```
1
element.lastElementChild：获取元素的最后一个子元素节点。
```
console.log(element.lastElementChild);
```
1
element.parentNode：获取元素的父节点。
```
console.log(element.parentNode);
```
1
element.previousSibling：获取元素的前一个兄弟节点。
```
console.log(element.previousSibling);
```
1
element.nextSibling：获取元素的下一个兄弟节点。
```
console.log(element.nextSibling);
```
1
element.previousElementSibling：获取元素的前一个兄弟元素节点。
```
console.log(element.previousElementSibling);
```
1
element.nextElementSibling：获取元素的下一个兄弟元素节点。
```
console.log(element.nextElementSibling);
```
1

# 4. 表单元素属性

inputElement.value：获取或设置表单元素的值（适用于<input>、<textarea>等）。

var input = document.getElementById("myInput");
console.log(input.value);
input.value = "新值";

1
2
3

inputElement.checked：获取或设置复选框或单选按钮的选中状态（适用于<input type="checkbox"> 和 <input type="radio">）。
```
var checkbox = document.getElementById("myCheckbox");
console.log(checkbox.checked);
checkbox.checked = true;
```
1
2
3
selectElement.options：获取下拉列表中的所有选项（适用于<select>标签）。
```
var select = document.getElementById("mySelect");
console.log(select.options);
```
1
2
selectElement.selectedIndex：获取或设置下拉列表中被选中项的索引。
```
console.log(select.selectedIndex);
select.selectedIndex = 2;
```
1
2
optionElement.selected：获取或设置选项是否被选中（适用于<option>标签）。
```
var option = select.options[0];
console.log(option.selected);
option.selected = true;
```
1
2
3

# 5. 事件属性

element.onclick：获取或设置点击事件的处理函数。

element.onclick = function() {
    alert("元素被点击了！");
};

1
2
3

element.onmouseover：获取或设置鼠标移入事件的处理函数。

element.onmouseover = function() {
    console.log("鼠标移入元素！");
};

1
2
3

element.onmouseout：获取或设置鼠标移出事件的处理函数。

element.onmouseout = function() {
    console.log("鼠标移出元素！");
};

1
2
3

element.onchange：获取或设置表单元素的值改变事件的处理函数。

var input = document.getElementById("myInput");
input.onchange = function() {
    console.log("输入值改变了！");
};

1
2
3
4

element.onsubmit：获取或设置表单提交事件的处理函数。

var form = document.getElementById("myForm");
form.onsubmit = function(event) {
    event.preventDefault(); // 阻止表单提交
    console.log("表单提交！");
};

1
2
3
4
5

这些是一些常用的 DOM 属性，可以帮助你在 JavaScript 中更方便地操作 HTML 元素和文档结构。通过熟练掌握这些属性，你可以实现丰富的动态交互效果和复杂的页面逻辑。

# 3. 查询操作

获取 DOM 对象的常用方法如下：

方法	含义
document.getElementById("id值")	根据 id 属性来查询节点，返回匹配的第一个节点
document.getElementsByName("name属性值")	根据 name 属性来查询，返回所有匹配的节点集合
document.getElementsByTagName("标签名")	根据标签名来查询，返回所有匹配的节点集合
document.getElementsByClassName("类名")	根据 class 属性来查询，返回所有匹配的节点集合
document.querySelector("选择器")	根据 CSS 选择器来查询，返回匹配的第一个节点
document.querySelectorAll("选择器")	根据 CSS 选择器来查询，返回所有匹配的节点集合
node.getElementsByTagName("标签名")	在当前节点的内部根据标签名来查询
node.parentNode	查询当前节点的父节点
node.children	查询当前节点的所有子元素节点
node.firstElementChild	查询当前节点的第一个子元素节点
node.lastElementChild	查询当前节点的最后一个子元素节点
node.previousElementSibling	查询当前节点的上一个元素节点
node.nextElementSibling	查询当前节点的下一个元素节点

节点类型包括：元素节点、文本节点、属性节点等。

# 4. 访问操作

# 1. 访问属性

获取和设置 DOM 对象的属性有两种方式：

直接访问属性【用法：DOM对象.属性　】

var element = document.getElementById("myElement");
console.log(element.id);  // 获取属性
element.id = "newId";     // 设置属性

1
2
3

使用 setAttribute() 和 getAttribute() 方法

用法：DOM对象.setAttribute("属性名","属性值") 或 DOM对象.getAttribute("属性名")

var element = document.getElementById("myElement");
console.log(element.getAttribute("id")); // 获取属性
element.setAttribute("id", "newId");     // 设置属性

1
2
3

# 2. 访问内容

获取和设置标签中的内容有三种方式：

使用 innerHTML 【用法：DOM对象.innerHTML 将内容解析为HTML】。

var element = document.getElementById("myElement"); // 获取DOM对象
console.log(element.innerHTML);  // 获取 HTML 内容
element.innerHTML = "<b>新内容</b>";  // 设置 HTML 内容

1
2
3

使用 innerText

用法： DOM对象.innerText 将内容作为纯文本，会解析 HTML 实体（如 < 被解析为 <，> 被解析为 >）。

var element = document.getElementById("myElement"); // 获取DOM对象
console.log(element.innerText);  // 获取文本内容
element.innerText = "新内容";    // 设置文本内容

1
2
3

使用 textContent

用法： DOM对象.textContent 将内容作为纯文本，但不解析 HTML 实体，返回所有文本内容，包括隐藏文本（隐藏文本就是指一些被css样式隐藏的文本）。
```
var element = document.getElementById("myElement"); // 获取DOM对象
console.log(element.textContent);  // 获取文本内容
element.textContent = "新内容";    // 设置文本内容
```
1
2
3

因此，在需要获取所有文本内容并保持原始格式的情况下，使用 textContent 更合适；而在需要只获取可见文本并解析 HTML 实体的情况下，使用 innerText 更合适。

# 3. 访问CSS

获取和设置 CSS 样式有三种方式：

使用 style 属性

用法：DOM对象.style.样式属性，如果CSS属性中有短横线-，需要去掉短横线，然后将其后的单词首字母改成大写，如fontSize

var element = document.getElementById("myElement"); // 获取DOM对象
element.style.color = "red";  // 设置样式
console.log(element.style.color);  // 获取样式，注意只能获取行内样式

1
2
3

使用 className 属性替换类样式

用法：DOM对象.className，可以更改元素的类名，从而改变其样式，因为类名通常在 CSS 文件中定义了样式。

var element = document.getElementById("myElement");  // 获取DOM对象
element.className = "newClass";  // 设置类名
console.log(element.className);  // 获取类名

1
2
3

使用 classList 属性添加类样式

用法：DOM对象.classList，通过classList的add()、remove()进行类样式的添加和删除，从而改变元素的样式。

var element = document.getElementById("myElement"); // 获取DOM对象
element.classList.add("newClass");    // 添加类
element.classList.remove("oldClass"); // 移除类
console.log(element.classList);       // 获取类列表

1
2
3
4

# 4. 更新操作

对节点进行创建、添加、修改、删除等操作的常用方法如下：

方法	含义
document.createElement("标签名")	创建一个元素节点，即标签
document.createTextNode("文本内容")	创建一个文本节点，即标签中的文本内容
node.appendChild(newNode)	将一个新的节点newNode添加到指定的节点node中子节点的末尾
node.insertBefore(newNode,refNode)	将一个新的节点newNode插入到node节点的子节点refNode之前
node.replaceChild(newNode,refNode)	用一个新的节点newNode替换原有的node节点中的子节点refNode
node.removeChild(refNode)	删除当前节点中指定的子节点
node.remove()	删除当前节点

# 1. 创建节点

创建元素节点

使用 document.createElement("标签名") 方法创建一个新的元素节点。
```
var newElement = document.createElement("div"); // 创建一个新的 <div> 元素节点
```
1
创建文本节点

使用 document.createTextNode("文本内容") 方法创建一个新的文本节点。
```
var newText = document.createTextNode("这是一个文本节点"); // 创建一个文本节点
```
1

# 2. 添加节点

将一个新的节点 newNode 添加到指定父节点 node 中子节点的末尾

使用 node.appendChild(newNode) 方法将新的节点添加到指定父节点的末尾。

var parentElement = document.getElementById("parent"); // 获取父节点
parentElement.appendChild(newElement); // 将 newElement 添加到 parentElement 的末尾

1
2

将一个新的节点 newNode 插入到 node 节点的子节点 refNode 之前

使用 node.insertBefore(newNode, refNode) 方法将新的节点插入到指定子节点之前。

var referenceElement = document.getElementById("reference"); // 获取参考节点
parentElement.insertBefore(newElement, referenceElement); // 将 newElement 插入到 referenceElement 之前

1
2

# 3. 替换节点

用一个新的节点 newNode 替换原有的 node 节点中的子节点 refNode

使用 node.replaceChild(newNode, refNode) 方法用新的节点替换现有的子节点。
```
parentElement.replaceChild(newElement, referenceElement); // 用 newElement 替换 referenceElement
```
1

# 4. 删除节点

删除当前节点中指定的子节点

使用 node.removeChild(refNode) 方法删除指定的子节点。
```
parentElement.removeChild(referenceElement); // 删除 referenceElement 节点
```
1
删除当前节点

使用 node.remove() 方法删除当前节点。
```
newElement.remove(); // 删除 newElement 节点
```
1

# 5. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 操作示例</title>
    <script type="text/javascript">
        // 等页面加载完后执行主函数
        window.onload = function() {
            // 1. 获取元素
            var element = document.getElementById("myElement");

            // 2. 访问属性
            console.log("ID:", element.id);  // 获取属性
            element.id = "newId";            // 设置属性

            // 3. 访问内容
            console.log("内容:", element.innerHTML);  // 获取 HTML 内容
            element.innerHTML = "<b>新内容</b>";      // 设置 HTML 内容

            // 4. 访问 CSS
            element.style.color = "blue";    // 设置样式
            console.log("样式:", element.style.color);  // 获取样式

            // 5. 更新操作 - 创建和添加节点
            var newElement = document.createElement("p");  // 创建元素节点
            newElement.textContent = "这是一个新的段落。"; // 创建文本节点
            document.body.appendChild(newElement);         // 添加新节点

            // 6. 插入节点
            var anotherElement = document.createElement("p");
            anotherElement.textContent = "插入到新节点之前的段落。";
            document.body.insertBefore(anotherElement, newElement); // 插入节点

            // 7. 替换节点
            var replacementElement = document.createElement("p");
            replacementElement.textContent = "这是替换后的段落。";
            document.body.replaceChild(replacementElement, newElement); // 替换节点

            // 8. 删除节点
            document.body.removeChild(anotherElement); // 删除节点
        }
    </script>
</head>
<body>
    <div id="myElement">原内容</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

编辑此页

上次更新: 2025/01/25, 22:32:05

← Debug调试事件处理→

DOM

# DOM

# 1. DOM简介

# 2. DOM节点分类

# 1. 元素节点（Element Node）

# 1.1 innerHTML

# 1.2 outerHTML

# 2. 文本节点（Text Node）

# 3. 注释节点（Comment Node）

# 4. 属性节点（Attribute Node）

# 5. 文档节点（Document Node）

# 6. 文档类型节点（DocumentType Node）

# 2. 常用DOM属性

# 1. document 对象属性

# 2. 元素对象属性

# 3. 节点相关属性

# 4. 表单元素属性

# 5. 事件属性

# 3. 查询操作

# 4. 访问操作

# 1. 访问属性

# 2. 访问内容

# 3. 访问CSS

# 4. 更新操作

# 1. 创建节点

# 2. 添加节点

# 3. 替换节点

# 4. 删除节点

# 5. 示例代码

# 1.1 `innerHTML`

# 1.2 `outerHTML`

# 1. `document` 对象属性