JavaScript基础-DOM 简介

news2025/3/19 7:10:14

在现代Web开发中，JavaScript与HTML和CSS一起构成了网页的核心技术。而在这三者之中，DOM（Document Object Model，文档对象模型）作为浏览器处理网页内容的一种接口，扮演着至关重要的角色。通过DOM，JavaScript能够动态地访问和操作网页的内容、结构以及样式。本文将介绍DOM的基本概念、核心组成部分以及如何使用JavaScript来操作DOM。

一、什么是DOM？

DOM是针对HTML和XML文档的一个编程接口。它将整个文档描绘成一个节点树，其中每个节点代表文档的一部分（如元素、属性或文本）。通过DOM提供的API，开发者可以轻松地添加、修改或删除页面上的任何部分。

核心特性：

树状结构：DOM以树的形式表示文档，树的每个分支都是一个节点。
跨语言支持：虽然通常与JavaScript一起提及，但DOM实际上是一种独立于语言的API。
动态性：允许程序在运行时动态地改变文档的内容和结构。

二、DOM的核心组成部分

1. 文档节点（Document Node）

文档节点是DOM树的根节点，代表整个HTML文档。可以通过document对象访问。

示例：

console.log(document.title); // 输出当前页面的标题

2. 元素节点（Element Nodes）

元素节点代表HTML文档中的标签，如<div>、<p>等。每个元素都可以被视为DOM树中的一个节点。

示例：

let header = document.createElement("h1");
header.textContent = "Hello, World!";
document.body.appendChild(header);

3. 属性节点（Attribute Nodes）

属性节点包含关于元素的信息，例如id、class等。

示例：

let div = document.createElement("div");
div.setAttribute("id", "main-container");
console.log(div.getAttribute("id")); // 输出: main-container

4. 文本节点（Text Nodes）

文本节点包含在元素内的实际文本内容。

示例：

let paragraph = document.createElement("p");
let textNode = document.createTextNode("This is a paragraph.");
paragraph.appendChild(textNode);
document.body.appendChild(paragraph);

三、使用JavaScript操作DOM

1. 查找元素

可以通过多种方式查找DOM中的元素，包括getElementById()、getElementsByClassName()、getElementsByTagName()以及querySelector()和querySelectorAll()。

示例：

// 通过ID查找元素
let myDiv = document.getElementById("myDiv");

// 通过类名查找元素
let elements = document.getElementsByClassName("highlight");

// 使用CSS选择器查找第一个匹配项
let firstParagraph = document.querySelector("p");

// 使用CSS选择器查找所有匹配项
let allParagraphs = document.querySelectorAll("p");

2. 修改元素

一旦找到所需的元素，就可以通过修改其属性或内容来更新页面。

示例：

// 修改文本内容
firstParagraph.textContent = "New content";

// 修改属性
myDiv.setAttribute("style", "color: red;");

3. 添加或移除元素

可以通过appendChild()、removeChild()等方法动态地添加或移除DOM中的元素。

示例：

// 创建新元素并添加到文档中
let newDiv = document.createElement("div");
newDiv.textContent = "I am a new div.";
document.body.appendChild(newDiv);

// 移除元素
document.body.removeChild(newDiv);

四、事件处理

DOM还提供了一种机制来响应用户的交互，比如点击、输入等，这被称为事件处理。

示例：

let button = document.createElement("button");
button.textContent = "Click me";
button.onclick = function() {
    alert("Button clicked!");
};
document.body.appendChild(button);