【Java 进阶篇】JavaScript DOM 编程：理解文档对象模型

原创

繁依Fanyi 2025-06-13 14:40:43 ©著作权

文章标签 表单提交开发者鼠标指针 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者繁依Fanyi的原创作品，请联系作者获取转载授权，否则将追究法律责任

【Java 进阶篇】JavaScript DOM 编程：理解文档对象模型_表单提交

在 web 开发中，DOM（文档对象模型）是一个重要的概念。DOM 是一种将网页文档表示为树状结构的方式，允许开发者使用 JavaScript 来访问和操作网页的内容。本篇博客将详细介绍 DOM，包括什么是 DOM、如何访问 DOM 元素、如何操作 DOM、DOM 事件等。无论你是刚刚入门 web 开发还是希望深入了解 DOM，这篇博客都将对你有所帮助。

什么是 DOM？

DOM 是 Document Object Model（文档对象模型）的缩写。它是一种编程接口，允许开发者使用脚本语言（通常是 JavaScript）来访问和修改网页的内容。DOM 将网页表示为一个树状结构，每个部分都是一个对象，这些对象可以被脚本语言访问和操纵。

DOM 的树状结构如下所示：

【Java 进阶篇】JavaScript DOM 编程：理解文档对象模型_开发者_02

文档（Document）是整个网页的根节点。
元素（Element）是文档中的标签，如

<div>

<p>

<a>

。
属性（Attribute）是元素的特性，如

id

class

。
文本（Text）是元素中的文本内容。

如何访问 DOM 元素？

要访问 DOM 元素，你需要使用 JavaScript。下面是一些基本的方法来获取 DOM 元素：

1. 通过 ID 获取元素

登录后复制

var element = document.getElementById("myElement");

上面的代码会获取具有 id

2. 通过标签名获取元素

登录后复制

var elements = document.getElementsByTagName("p");

上面的代码将获取所有 <p>

3. 通过类名获取元素

登录后复制

var elements = document.getElementsByClassName("myClass");

上面的代码将获取所有 class

4. 通过选择器获取元素

登录后复制

var element = document.querySelector("#myElement");

上面的代码将获取具有 id 属性为 “myElement” 的元素。querySelector

5. 通过父元素获取子元素

登录后复制

var parentElement = document.getElementById("parent");
var childElement = parentElement.querySelector(".child");

上面的代码首先获取具有 id 属性为 “parent” 的元素，然后从该元素中获取具有 class

如何操作 DOM？

一旦你获取了 DOM 元素，你就可以对其进行各种操作。以下是一些常见的 DOM 操作：

1. 改变元素的文本内容

登录后复制

var element = document.getElementById("myElement");
element.innerHTML = "新的文本内容";

上面的代码将改变 id

2. 改变元素的样式

登录后复制

var element = document.getElementById("myElement");
element.style.color = "red";

上面的代码将改变 id

3. 添加和移除 CSS 类

登录后复制

var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");

上面的代码将为 id

4. 创建新元素

登录后复制

var newElement = document.createElement("div");
newElement.innerHTML = "新的元素";

上面的代码将创建一个新的 <div>

5. 添加和移除子元素

登录后复制

var parentElement = document.getElementById("parent");
var childElement = document.createElement("div");
parentElement.appendChild(childElement); // 添加子元素
parentElement.removeChild(childElement); //移除子元素

上面的代码首先获取具有 id 属性为 “parent” 的元素，然后创建一个新的 <div> 元素，并将其作为子元素添加到 “parent” 元素中。随后，使用 removeChild

6. 修改元素的属性

登录后复制

var element = document.getElementById("myElement");
element.setAttribute("title", "新的标题");

上面的代码将改变 id 为 “myElement” 的元素的 title

7. 获取元素的属性值

登录后复制

var element = document.getElementById("myElement");
var title = element.getAttribute("title");

上面的代码将获取 id 为 “myElement” 的元素的 title

8. 添加事件监听器

登录后复制

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("按钮被点击了！");
});

上面的代码将为 id

DOM 事件

DOM 事件是 web 开发中的一个关键概念，允许开发者对用户与网页的交互作出响应。以下是一些常见的 DOM 事件：

1. click 事件

click 事件在元素被点击时触发。你可以为按钮、链接或其他元素添加 click

登录后复制

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("按钮被点击了！");
});

2. mouseover 和 mouseout 事件

mouseover 事件在鼠标指针移入元素时触发，而 mouseout

登录后复制

var element = document.getElementById("myElement");
element.addEventListener("mouseover", function() {
  element.style.backgroundColor = "yellow";
});

element.addEventListener("mouseout", function() {
  element.style.backgroundColor = "white";
});

上面的代码将在鼠标指针移入元素时将元素的背景颜色更改为黄色，而在鼠标指针移出元素时将其还原为白色。

3. keydown 事件

keydown

登录后复制

document.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    alert("Enter 键被按下了！");
  }
});

上面的代码将在用户按下 Enter 键时触发一个提示框。

4. submit 事件

submit

登录后复制

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  if (!validateForm()) {
    event.preventDefault(); // 阻止表单提交
  }
});

上面的代码将在表单提交时调用 validateForm