跳转至

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> 等。
  • 文本节点:代表元素中的文本内容。
  • 属性节点:代表元素的属性,如 classid 等。
  • 文档节点:代表整个文档,即 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. 修改元素内容

我们可以使用 innerHTMLtextContent 属性来修改元素的内容。

// 修改 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 元素。
  • 可以通过 innerHTMLtextContentstyle 等属性修改 DOM 元素的内容和样式。
  • 可以使用 appendChild()removeChild() 方法添加和删除 DOM 元素。

通过本主题的学习,你应该能够理解 DOM 的基本概念,并能够使用 JavaScript 进行简单的 DOM 操作。接下来,你可以继续学习更高级的 DOM 操作技巧,如事件处理和动态内容更新。