DOM基础知识

一、DOM概

1. 何为DOM
   DOM，即Document Object Model（文档对象模型），是一种Web API，它将HTML或XML文档表示为一个树形结构，每个节点都是一个对象，从而使开发者可以使用脚本语言（例如JavaScript）动态地访问和修改文档内容、结构和样式。

2. 何为Web API
   Web API是一种由Web浏览器提供的编程接口，它允许开发者通过JavaScript等脚本语言与浏览器进行交互，从而实现动态网页和丰富的Web应用程序。

3. DOM的用处
   DOM有以下几个用处：
   可以实现动态网页和丰富的Web应用程序；
   可以动态地修改文档内容、结构和样式，使Web页面更加灵活和交互；
   可以获取和操作页面元素，从而实现与用户的交互和数据处理；
   可以进行事件绑定和处理，响应用户的操作和交互。

二、DOM详

1. 获取元素

注意，获取元素即，将HTML中的元素获取为对象，因为不怎么发生变化所以最好用const声明(pink老师是这样说的)。
(1). 根据ID和标签名获取页面元素
可以使用document.getElementById() 方法根据元素的ID属性获取页面元素(返回一个对象)。
可以使用document.getElementsByTagName() 方法根据元素的标签名获取页面元素(返回一个类似对象数组的东西)。
例如：

html:

<div id="myDiv">Hello World!</div>
<div class="myClass">Hello World!</div>
<div class="myClass">Hello DOM!</div>

javascript:

const myDiv = document.getElementById("myDiv");
const myClass = document.getElementsByTagName("div");

(2). 根据HTML5新增获取页面元素
HTML5新增了几种获取页面元素的方法，包括document.querySelector() 和document.querySelectorAll() 方法。
document.querySelector()方法返回匹配指定CSS选择器的第一个元素(返回一个对象)，
document.querySelectorAll()方法返回匹配指定CSS选择器的所有元素(返回一个类似对象数组的东西)。
注意，即使document.querySelectorAll()方法中指定CSS选择器的所有元素只有一个，返回的也是一个对象数组。
例如：

html:

<div class="myClass">Hello World!</div>
<div class="myClass">Hello DOM!</div>

javascript:

const myClass = document.querySelector(".myClass"); // 返回第一个匹配的元素
const myClasses = document.querySelectorAll(".myClass"); // 返回所有匹配的元素

(3). 获取特殊元素
除了普通的页面元素，还有一些特殊的元素，例如document对象和window对象。可以使用document和window变量来获取这些特殊元素。例如：

const myDocument = document; // 获取document对象
const myWindow = window; // 获取window对象

2. 操作元素

在DOM中，可以通过各种方法来操作元素，包括改变元素内容、修改元素属性、表单元素属性的操作、样式属性操作以及自定义属性操作等。

(1). 改变元素内容
可以使用innerText和innerHTML属性来获取或设置元素的内容。
注意innerText不识别标签，而innerHTML可以。
例如：

const myDiv1 = document.getElementById("myDiv1");
const myDiv2 = document.getElementById("myDiv2");
myDiv1.innerText = "Hello World!";
myDiv2.innerHTML = "<b>Hello World!<b>";

(2). 修改元素属性

• 可以使用setAttribute()和getAttribute()方法来修改和获取元素的属性。例如：

const myDiv = document.getElementById("myDiv");
myDiv.setAttribute("class", "myClass"); // 设置class属性为myClass
alert(myDiv.getAttribute("class")); // 获取class属性的值

• 样式属性操作
  可以使用style对象来操作元素的样式属性。例如：

const myDiv = document.getElementById("myDiv");
myDiv.style.color = "red"; // 修改颜色属性为红色

• 表单元素属性的操作
  可以使用value属性来获取或设置表单元素的值。例如：

html:

<input type="text" id="myInput">

javascript:

const myInput = document.getElementById("myInput");
myInput.value = "Hello World!";

注意，想要禁用某个表单则将其disable属性设为true。

• 自定义属性操作
  HTML5中规定可以为元素添加非标准的属性，但要添加前缀"data-“，而dataset则相当于一个自定义属性的集合(里面的元素没有前缀"data-”),可以使用dataset属性来获取或设置自定义属性。

例如：

html:

<div id="myDiv" data-name="myData"></div>

javascript:

const myDiv = document.getElementById("myDiv");
alert(myDiv.dataset.name); // 获取data-name属性的值
myDiv.dataset.name = "newData"; // 设置data-name属性为newData

3. 事件

(1). 什么是事件
事件是指用户在Web页面上进行的各种操作，例如单击、双击、鼠标移动等。事件可以通过JavaScript等脚本语言进行监听和处理，从而实现动态交互和响应。
(2). 常见事件
常见的事件包括：

鼠标事件：单击、双击、鼠标移动、鼠标进入、鼠标离开等；

键盘事件：按键按下、按键释放、按键保持按下等；

表单事件：提交表单、重置表单、表单元素失去焦点、表单元素获得焦点等；

窗口事件：页面加载完成、页面关闭、页面滚动、窗口大小改变等。

(3). 执行事件的步骤
执行事件的步骤如下：

选择要监听的页面元素；
注册事件监听器（即指定要执行的JavaScript代码）；
用户进行操作时，触发事件；
浏览器自动执行注册的事件监听器中的代码。

• 注册事件
  (传统方法‘on+事件=’这种方法同一个事件只能注册一个处理函数，后注册的函数会覆盖原函数，这种方法很不方便)

可以使用addEventListener(event,listenner,useCapture)方法来注册事件监听器。该方法接受三个参数：

event 事件类型字符串,比如click，mouseover，不要加on
listener 事件处理函数，事件发生时，会调用该监听函数
useCapture 可选参数，是一个布尔值，默认是false

例如：

const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", function() {
  alert("Hello World!");
});

• 删除（解绑）事件
  可以使用removeEventListener(event,listenner,useCapture)方法来删除事件监听器。
  该方法接受三个参数(同上)：要删除的事件类型、事件处理函数、是否在捕获阶段处理事件（可选，默认为false）。
  例如：

const myDiv = document.getElementById("myDiv");
function myFunction() {
  alert("Hello World!");
}
myDiv.addEventListener("click", myFunction);
myDiv.removeEventListener("click", myFunction);

(4). 事件流
事件流指的是事件从页面中接收的顺序，分为捕获阶段、目标阶段和冒泡阶段。

默认情况下，事件是从最外层的元素开始捕获，然后到达目标元素，最后从目标元素开始冒泡直到最外层的元素。

可以使用addEventListener()方法的第三个参数来控制事件的流程。例如：

const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", function() {
  alert("Hello World!");
}, true); // 捕获阶段处理事件

(5). 事件对象
理解：在触发DOM 上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息，比如谁绑定了此事件，鼠标或者键盘的位置等。
在事件处理函数中(event对象会被传入作为参数)，可以通过事件对象来获取有关事件的信息，例如事件的类型、事件的目标元素、鼠标的位置等。可以使用event变量来访问事件对象。例如：

const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", function(event) {
  alert("Event type: " + event.type); // 输出事件类型
  alert("Event target: " + event.target); // 输出事件目标元素
  alert("Mouse position: " + event.clientX + ", " + event.clientY); // 输出鼠标位置
});

4. 节点操作

在DOM中，节点是构成文档的基本单元。节点可以是元素、文本、注释等。
以下则是主要节点的类型：

注意，节点的nodeType类型是一组常量，如element的nodeType=1。
节点可以进行创建、添加、删除、复制等操作。

(1). 基本属性
在DOM中，所有节点都是Node对象的实例。节点的属性包括：

nodeType：节点类型，可以是元素节点、文本节点、注释节点等；
nodeName：节点名称，可以是元素节点的标签名、文本节点的#text等；
nodeValue：节点的值，可以是元素节点的null、文本节点的文本值等；

(2).父子节点

相关属性：

• parentNode：父节点；
• childNodes：子节点列表，其中包括一个NodeList对象(是一种类数组对象，可通过方括号语法访问，有length属性)，并且能动态反映DOM结构(就是说，往父节点下添加了一个子节点的话，这一新节点也会在childNodes里)；
• firstChild：第一个子节点；
• lastChild：最后一个子节点；

例如：

html:

<div id="myDiv">
  <p>Hello World!</p>
</div>

javascript:

const myDiv = document.getElementById("myDiv");
alert(myDiv.parentNode.nodeName); // 输出BODY
alert(myDiv.childNodes.length); // 输出1

(3). 兄弟节点
可以使用nextSibling属性和previousSibling属性来访问节点的下一个兄弟节点
和上一个兄弟节点。
可以使用nextElementSibling属性和previousElementSibling属性来访问节点的下一个元素兄弟节点和上一个元素兄弟节点。
例如：

html:

<div id="myDiv">
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
</div>

javascript:

const secondP = document.getElementsByTagName("p")[1];
alert(secondP.previousSibling.nodeName); // 输出#text
alert(secondP.nextSibling.nodeName); // 输出P

(4). 创建和添加节点

• document.creatElement(‘tagName’) 创建由 tagName 指定的 HTML 元素，也称为动态创建元素节点。
• node.appendChild(child) 方法将一个节点添加到指定父节点的子节点列表的末尾.
• node.insertBefore(child,指定元素) 将一个节点添加到父节点的指定子节点前面(若要添加到末尾参数为"(child,null)")。

例如：

html:

<div id="myDiv"></div>

javascript:

const myDiv = document.getElementById("myDiv");
const newP = document.createElement("p");
const newText = document.createTextNode("Hello World!");
newP.appendChild(newText);
myDiv.appendChild(newP);

(5). 删除和替换节点

• removeChild()方法，从文档中删除节点。
• replaceChild()方法，从文档中替换节点，两个参数，要插入的节点和要替换的节点。
  例如：

html:

<div id="myDiv">
  <p>Hello World!</p>
  <p>Hello World!</p>
</div>

javascript:

const myDiv = document.getElementById("myDiv");
const myP1 = myDiv.getElementsByTagName("p")[0];
const myP2 = myDiv.getElementsByTagName("p")[1];
const newP = document.createElement("p");
myDiv.removeChild(myP1);
myDiv.replaceChild(newP,myP2);

(6). 复制节点

• cloneNode()方法,复制节点。例如：

html:

<div id="myDiv">
  <p>Hello World!</p>
</div>

javascript:

const myDiv = document.getElementById("myDiv");
const newDiv = myDiv.cloneNode(true); // 深度复制
document.body.appendChild(newDiv);