进阶-DOM

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或类名来选择元素。

操作HTML文档中的DOM元素时，可以使用不同类型的选择器来精确地选取需要的元素。以下是一些常见的选择器类型：

1. 标签选择器：选择特定标签的元素，例如 div 会选择所有 <div> 元素。

2. ID选择器：通过元素的唯一ID属性来选择单个元素，例如 #myElement 会选择具有 id 属性为 "myElement" 的元素。

3. 类选择器：通过元素的类名来选择多个元素，例如 .myClass 会选择具有 class 属性包含 "myClass" 的所有元素。

4. 属性选择器：通过元素的属性来选择元素，例如 [type="text"] 会选择具有 type 属性值为 "text" 的元素。

5. 组合选择器：将多个选择器组合在一起，以选择满足所有条件的元素，例如 div.myClass 会选择所有同时包含 <div> 和 "myClass" 的元素。

6. 后代选择器：选择某个元素的后代元素，例如 div p 会选择所有 <div> 元素下的 <p> 元素。

7. 子元素选择器：选择某个元素的直接子元素，例如 ul > li 会选择所有 <ul> 元素下的直接子级 <li> 元素。

8. 伪类选择器：选择处于特定状态的元素，例如 :hover 会选择鼠标悬停在元素上的情况。

9. 伪元素选择器：选择元素的特定部分，例如 ::before 用于在元素内容前插入内容。

10. 结构性伪类选择器：选择元素的特定位置，例如 :first-child 会选择第一个子元素。

 

 

?

1 2 3 4 5 6 7 8 9 10 11

// 通过选择器选择单个元素 let element = document.querySelector("#myElement");   // 通过选择器选择多个元素 let elements = document.querySelectorAll(".myClass");   // 通过元素ID选择元素 let elementById = document.getElementById("myElementId");   // 通过类名选择元素 let elementsByClass = document.getElementsByClassName("myClass");

　　

7. 修改元素： 可以使用JavaScript来修改DOM元素的属性、样式、内容和结构。可以通过节点的属性和方法来实现。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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);

　　

8. 事件处理： 可以使用DOM来处理和响应用户的交互事件。通过添加事件监听器，可以在特定事件发生时执行相应的操作。

?

1 2 3 4 5

let button = document.querySelector("#myButton");   button.addEventListener("click", function() {   console.log("按钮被点击了！"); });

　　

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