JavaScript DOM 操作

DOM 操作是网页交互的重要部分。通过 DOM，我们可以动态地获取、创建、修改、或删除页面中的元素，让网页具有更丰富的用户体验。

1. 什么是 DOM？

DOM 将 HTML 文档表示为一个树形结构，其中每个节点都是文档中的一个对象。JavaScript 可以访问 DOM，从而修改网页内容、结构和样式。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="title">Hello, DOM!</h1>
    <p class="text">This is a paragraph.</p>
    <div class="container"></div>
</body>
</html>

在上面的 HTML 中，DOM 树结构包括 html、head、body 等节点，而每个节点都可以通过 JavaScript 操作。

2. 选择元素

2.1 getElementById

getElementById 用于根据元素的 id 获取元素，这是选择单个元素的常用方法：

1
2
let title = document.getElementById("title");
console.log(title);  // <h1 id="title">Hello, DOM!</h1>

2.2 getElementsByClassName

getElementsByClassName 返回具有指定类名的所有元素的集合（HTMLCollection），结果是动态的，随文档内容变化而更新：

1
2
let paragraphs = document.getElementsByClassName("text");
console.log(paragraphs[0]);  // <p class="text">This is a paragraph.</p>

2.3 getElementsByTagName

getElementsByTagName 根据元素标签名返回所有匹配的元素：

1
2
let divs = document.getElementsByTagName("div");
console.log(divs[0]);  // <div class="container"></div>

2.4 querySelector 和 querySelectorAll

querySelector 返回与选择器匹配的第一个元素，而 querySelectorAll 返回所有匹配的元素（NodeList）：

1
2
3
4
let title = document.querySelector("#title");
let paragraphs = document.querySelectorAll(".text");
console.log(title);       // <h1 id="title">Hello, DOM!</h1>
console.log(paragraphs);  // NodeList(1) [<p class="text">This is a paragraph.</p>]

3. 修改元素内容

3.1 innerText 和 textContent

  • innerText 返回或设置元素内的可见文本。
  • textContent 返回或设置元素的所有文本，包括隐藏元素。
1
2
title.innerText = "DOM 操作!";
title.textContent = "Updated Title";

3.2 innerHTML

innerHTML 返回或设置 HTML 内容。它可以插入 HTML 元素，这也是最常用的内容修改方法：

1
2
let container = document.querySelector(".container");
container.innerHTML = "<p>New Paragraph</p>";

3.3 outerHTML

outerHTML 返回或替换整个元素，包括它本身和内容。它会替换整个元素而非仅内容：

1
title.outerHTML = "<h2 id='title'>New Title Tag</h2>";

4. 修改属性和样式

4.1 修改属性

可以使用 setAttribute、getAttribute 和 removeAttribute 来操作元素的属性：

1
2
3
title.setAttribute("class", "highlight");
let idValue = title.getAttribute("id");
title.removeAttribute("class");

也可以直接通过点操作符来修改属性（更常用）：

1
title.id = "newTitle";

4.2 修改样式

通过 style 属性可以修改内联样式：

1
2
title.style.color = "blue";
title.style.fontSize = "24px";

也可以使用 classList 添加、移除、切换样式类：

1
2
3
title.classList.add("highlight");
title.classList.remove("highlight");
title.classList.toggle("active");

5. 创建和删除元素

5.1 创建元素

使用 document.createElement 创建新元素，再用 appendChild 将其添加到 DOM 中：

1
2
3
4
let newDiv = document.createElement("div");
newDiv.classList.add("newDiv");
newDiv.textContent = "I am a new div";
document.body.appendChild(newDiv);

5.2 删除元素

可以使用 removeChild 或 remove 方法来删除元素：

1
2
let container = document.querySelector(".container");
document.body.removeChild(container); // 使用父元素删除子元素

也可以直接调用 remove() 方法：

1
newDiv.remove();

6. DOM 事件

事件使得 JavaScript 能够响应用户的交互，比如点击、鼠标悬停、键盘输入等。

6.1 添加事件监听器

使用 addEventListener 来添加事件监听：

1
2
3
title.addEventListener("click", () => {
    alert("标题被点击了！");
});

6.2 常见事件类型

  • click：鼠标点击元素时触发。
  • mouseover：鼠标悬停在元素上时触发。
  • keydown：按下键盘上的任意键时触发。
  • submit：表单提交时触发。

6.3 移除事件监听器

使用 removeEventListener 来移除监听器。注意，只有使用命名函数时才能移除事件监听：

1
2
3
4
5
6
function handleClick() {
    alert("标题被点击了！");
}

title.addEventListener("click", handleClick);
title.removeEventListener("click", handleClick);
前端编程相关 > JavaScript
#前端技术 #JavaScript
JavaScript DOM 操作
https://blog.pangcy.cn/2020/05/04/前端编程相关/JavaScript/JavaScript DOM 操作/
作者
子洋
发布于
2020年5月4日
许可协议