DOM 操作:DOM 简介¶
概述¶
在本章中,我们将深入探讨文档对象模型(DOM)的基本概念。DOM 是 JavaScript 与网页内容交互的核心机制。通过 DOM,开发者可以动态地访问和操作 HTML 和 XML 文档的内容、结构和样式。
什么是 DOM?¶
文档对象模型(Document Object Model,简称 DOM)是 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树形结构,每个节点代表文档中的一个部分,如元素、属性或文本内容。通过 DOM,开发者可以使用 JavaScript 来动态地修改网页的内容、结构和样式。
DOM 树结构¶
DOM 将文档表示为一个树形结构,其中每个节点都是一个对象。树的根节点是 document
对象,它代表整个文档。从 document
开始,树的分支代表文档中的各个元素、属性和文本内容。
<!DOCTYPE html>
<html>
<head>
<title>DOM 示例</title>
</head>
<body>
<h1>欢迎来到 DOM 世界</h1>
<p>这是一个段落。</p>
</body>
</html>
在这个例子中,<html>
是根元素,它有两个子节点:<head>
和 <body>
。<head>
包含一个 <title>
元素,而 <body>
包含一个 <h1>
和一个 <p>
元素。
DOM 节点类型¶
DOM 树中的每个节点都有一个特定的类型。常见的节点类型包括:
- 元素节点:代表 HTML 元素,如
<div>
、<p>
、<h1>
等。 - 文本节点:代表元素中的文本内容。
- 属性节点:代表元素的属性,如
class
、id
等。 - 文档节点:代表整个文档,即
document
对象。
访问 DOM 元素¶
在 JavaScript 中,我们可以使用多种方法来访问 DOM 元素。以下是几种常见的方法:
1. 通过 id
访问元素¶
document.getElementById()
方法可以通过元素的 id
属性来访问特定的元素。
// 获取 id 为 "header" 的元素
let header = document.getElementById("header");
console.log(header); // 输出: <h1 id="header">欢迎来到 DOM 世界</h1>
2. 通过标签名访问元素¶
document.getElementsByTagName()
方法可以通过标签名来访问一组元素。
// 获取所有的 <p> 元素
let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs); // 输出: HTMLCollection [ <p>这是一个段落。</p> ]
3. 通过类名访问元素¶
document.getElementsByClassName()
方法可以通过类名来访问一组元素。
// 获取所有类名为 "highlight" 的元素
let highlights = document.getElementsByClassName("highlight");
console.log(highlights); // 输出: HTMLCollection [ <p class="highlight">...</p> ]
修改 DOM 元素¶
一旦我们访问了 DOM 元素,就可以对其进行修改。以下是一些常见的操作:
1. 修改元素内容¶
我们可以使用 innerHTML
或 textContent
属性来修改元素的内容。
// 修改 id 为 "header" 的元素内容
let header = document.getElementById("header");
header.innerHTML = "你好,DOM!";
2. 修改元素样式¶
我们可以通过 style
属性来修改元素的样式。
// 修改 id 为 "header" 的元素的颜色
let header = document.getElementById("header");
header.style.color = "blue";
3. 添加和删除元素¶
我们可以使用 appendChild()
和 removeChild()
方法来添加和删除元素。
// 创建一个新的 <p> 元素
let newParagraph = document.createElement("p");
newParagraph.textContent = "这是一个新的段落。";
// 将新段落添加到 body 中
document.body.appendChild(newParagraph);
// 删除 id 为 "header" 的元素
let header = document.getElementById("header");
document.body.removeChild(header);
练习题¶
1. 简单练习¶
编写一个 JavaScript 函数,将页面中所有 <p>
元素的文本颜色改为红色。
function changeParagraphColor() {
let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.color = "red";
}
}
2. 中等练习¶
编写一个 JavaScript 函数,在页面中添加一个带有文本内容的 <div>
元素,并将其背景颜色设置为黄色。
function addDiv() {
let newDiv = document.createElement("div");
newDiv.textContent = "这是一个新的 div 元素。";
newDiv.style.backgroundColor = "yellow";
document.body.appendChild(newDiv);
}
3. 复杂练习¶
编写一个 JavaScript 函数,创建一个包含 5 个 <li>
元素的无序列表,并将其添加到页面中。
function createList() {
let ul = document.createElement("ul");
for (let i = 1; i <= 5; i++) {
let li = document.createElement("li");
li.textContent = "列表项 " + i;
ul.appendChild(li);
}
document.body.appendChild(ul);
}
总结¶
在本主题中,我们学习了 DOM 的基本概念,包括 DOM 树结构、节点类型以及如何访问和修改 DOM 元素。我们还通过代码示例和练习题加深了对这些概念的理解。掌握 DOM 操作是 JavaScript 开发的基础,它为动态网页开发提供了强大的工具。
关键点¶
- DOM 是 HTML 和 XML 文档的编程接口,它将文档表示为树形结构。
- 常见的 DOM 节点类型包括元素节点、文本节点、属性节点和文档节点。
- 可以使用
getElementById()
、getElementsByTagName()
和getElementsByClassName()
等方法访问 DOM 元素。 - 可以通过
innerHTML
、textContent
和style
等属性修改 DOM 元素的内容和样式。 - 可以使用
appendChild()
和removeChild()
方法添加和删除 DOM 元素。
通过本主题的学习,你应该能够理解 DOM 的基本概念,并能够使用 JavaScript 进行简单的 DOM 操作。接下来,你可以继续学习更高级的 DOM 操作技巧,如事件处理和动态内容更新。