1.1 DOM的基本概念
文档对象模型 (DOM) 是用于网页文档的编程接口。它将文档的结构表示为节点树，其中每个节点都是文档的一部分，例如元素、文本、注释等。了解DOM及其节点是掌握网页技术的基础。
DOM的基本概念
什么是DOM?
DOM (Document Object Model) 表示一种描述HTML文档内容的层次结构。它允许程序和脚本动态访问文档内容，并修改其结构、样式和内容。
节点和元素
在DOM中，文档的所有部分都被视为节点（node）。节点分为几种类型：
- 元素节点：表示HTML标签。
- 文本节点：表示元素节点内的文本。
- 注释节点：表示HTML中的注释。
- 文档节点：表示整个文档。
节点树
DOM以树状结构表示，每个节点可以有子节点（子节点）。根节点是对象document，它代表整个HTML文档。
DOM结构示例：
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
对于这个文档，DOM树将如下所示：
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 节点类型
1. 元素节点
元素节点对应于HTML标签。例如，<body>标签的节点称为元素节点。
示例：
在这个示例中，<body> 和 <h1> 是元素节点。
<body>
<h1>Hello, World!</h1>
</body>
2. 文本节点
文本节点包含在元素节点内的文本。文本节点是元素节点的子节点，并包含字符串数据。
示例：
在这个示例中，文本 "Hello, World!" 是文本节点，是 <h1> 节点的子节点。
<h1>Hello, World!</h1>
3. 注释节点
注释节点表示HTML中的注释，以 <!-- 开始并以 --> 结束。
示例：
在这个示例中，<!-- This is a comment --> 是一个注释节点。
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. 文档节点
文档节点是DOM树的根节点，是文档中所有其他节点的父节点。
示例：
JavaScript中的document对象表示文档节点：
console.log(document);
1.3 交互DOM节点
1. 获取节点信息
节点对象的属性允许获取有关特定节点的信息。例如，可以查找节点的类型、名称和内容。
示例：
<html>
<head>
<title>我的网站</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // 输出: H1
console.log(heading.nodeType); // 输出: 1 (元素节点)
console.log(heading.textContent); // 输出: "你好，世界！"
2. 修改节点内容
可以使用DOM的属性和方法修改节点内容。
示例：
const paragraph = document.querySelector('p');
paragraph.textContent = '更新后的文本内容';
3. 操作子节点
每个DOM节点可以有子节点，可以访问和修改这些子节点。
示例：
<html>
<head>
<title>我的网站</title>
</head>
<body>
<ul>
<li>关于我们</li>
<li>职业机会</li>
<li>联系</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // 输出列表中第一个元素的文本
console.log(lastItem.textContent); // 输出列表中最后一个元素的文本
1.4 有用的属性
1. 属性 nodeName 和 nodeType
nodeName返回节点名nodeType返回节点类型（例如，1 表示元素节点，3 表示文本节点）
示例：
<html>
<head>
<title>我的网站</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // 输出: H1
console.log(element.nodeType); // 输出: 1
2. 属性 textContent 和 innerHTML
textContent返回或设置节点的文本内容innerHTML返回或设置节点的HTML内容
示例：
<html>
<head>
<title>我的网站</title>
</head>
<body>
<p>确实是一个<b>有趣的</b>和<b>有用的</b>段落！</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // 输出段落的文本内容
console.log(element.innerHTML); // 输出段落的HTML内容
3. 属性 parentNode, childNodes, firstChild 和 lastChild
parentNode返回父节点childNodes返回所有子节点的集合firstChild返回第一个子节点lastChild返回最后一个子节点
示例：
<html>
<head>
<title>我的网站</title>
</head>
<body>
<ul>
<li>关于我们</li>
<li>职业机会</li>
<li>联系</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // 输出父节点
console.log(element.childNodes); // 输出子节点的集合
console.log(element.firstChild); // 输出第一个子节点
console.log(element.lastChild); // 输出最后一个子节点
GO TO FULL VERSION