JZTXT

进阶-DOM

发布时间 2023-07-08 02:24:22作者: 黑逍逍

DOM（文档对象模型Document Object Model）是一种用于表示和操作HTML、XML和XHTML文档的编程接口。它将网页文档解析为由节点和对象组成的树状结构，开发者可以使用JavaScript来访问和修改这个树状结构。以下是对DOM的详细介绍：

  1. 节点（Nodes）： DOM中的每个元素、属性、文本均被视为节点。节点可以是元素节点、属性节点、文本节点等。DOM树中的每个节点都有其父节点、子节点和兄弟节点。

  2. 元素节点（Element Nodes）： 元素节点是文档中的HTML元素，如<div>、<p>、<a>等。元素节点可以具有属性、样式和事件监听器。

  3. 属性节点（Attribute Nodes）： 属性节点是元素节点的属性，如id、class、src等。通过属性节点，可以获取和修改元素的属性值。

  4. 文本节点（Text Nodes）： 文本节点表示元素节点中的文本内容。例如，在<p>元素中的文本内容就是一个文本节点。

  5. DOM树（DOM Tree）： DOM树是将HTML文档解析为节点层次结构的表示。根节点是文档节点（document），它是整个DOM树的顶级节点。每个节点都有其父节点、子节点和兄弟节点。

  6. 选择元素： 可以使用JavaScript的方法来选择DOM中的元素。常见的选择元素的方法包括使用querySelector和querySelectorAll方法、通过元素的ID或类名来选择元素。

// 通过选择器选择单个元素
let element = document.querySelector("#myElement");

// 通过选择器选择多个元素
let elements = document.querySelectorAll(".myClass");

// 通过元素ID选择元素
let elementById = document.getElementById("myElementId");

// 通过类名选择元素
let elementsByClass = document.getElementsByClassName("myClass");

　　

  1. 修改元素： 可以使用JavaScript来修改DOM元素的属性、样式、内容和结构。可以通过节点的属性和方法来实现。
let element = document.querySelector("#myElement");

// 修改元素的属性
element.setAttribute("id", "newId");

// 修改元素的样式
element.style.color = "red";

// 修改元素的内容
element.textContent = "New content";

// 添加新的子元素
let newElement = document.createElement("p");
newElement.textContent = "New paragraph";
element.appendChild(newElement);

　　

  1. 事件处理： 可以使用DOM来处理和响应用户的交互事件。通过添加事件监听器，可以在特定事件发生时执行相应的操作。
let button = document.querySelector("#myButton");

button.addEventListener("click", function() {
  console.log("按钮被点击了！");
});

　　

通过DOM，可以动态地访问和修改网页的内容、样式和结构，以及响应用户的交互行为