JavaScript DOM 是 JavaScript 中用于操作 HTML 和 XML 文档的 API。通过 DOM，你可以动态地添加、修改和删除 HTML 元素，以及与它们进行交互。

基本概念

  • DOM 节点：HTML 文档中的每个元素都是一个节点，例如元素节点、文本节点、属性节点等。
  • DOM 树：HTML 文档被表示为一个树形结构，其中 HTML 文档的根节点是 document 对象。

选择元素

你可以使用多种方法来选择 DOM 中的元素：

  • getElementById()：通过 ID 选择元素。
  • getElementsByClassName()：通过类名选择元素。
  • getElementsByTagName()：通过标签名选择元素。
  • querySelector() 和 querySelectorAll()：更强大的选择器，可以指定 CSS 选择器。

操作元素

选择元素后，你可以对其进行以下操作：

  • 修改内容：使用 innerHTML、textContent 和 innerText 属性。
  • 修改样式：使用 style 属性。
  • 添加或删除元素：使用 createElement()、appendChild()、removeChild() 和 insertBefore() 方法。

事件处理

你可以为元素添加事件监听器来处理用户交互：

  • addEventListener()：为元素添加事件监听器。
  • removeEventListener()：移除事件监听器。

示例

以下是一个简单的示例，展示了如何使用 JavaScript DOM 来改变元素的文本内容和样式：

// 获取元素
var element = document.getElementById("myElement");

// 修改内容
element.innerHTML = "Hello, world!";

// 修改样式
element.style.color = "red";
element.style.fontSize = "24px";

更多关于 JavaScript DOM 的教程，请访问本站教程。

JavaScript DOM