DOM(简略版

 

什么是DOM：

DOM是文档对象模型（Document Object Model）的缩写，它是用于表示和操作HTML、XML等文档内容的一种标准。简单来说，DOM是一个树形结构，用于表示网页中的所有元素和标签，并提供了一些API供开发人员通过JavaScript等脚本语言来访问和操作这些元素。

DOM的组成部分：

DOM由三个核心部分组成：文档对象、文档元素对象和节点对象。其中，文档对象代表整个HTML或XML文档，文档元素对象代表HTML或XML文档中的元素，而节点对象是文档元素对象下的子节点。

 文档对象（document）

文档对象代表整个HTML或XML文档，它是DOM的根节点。通过document对象，我们可以访问文档的各个部分，比如网页的title、body等。

例如，我们可以使用以下代码获取网页的标题：

var title = document.title;

文档元素对象

文档元素对象代表HTML或XML文档中的元素。比如，网页中的HTML、BODY、DIV、P等都是元素。

例如，我们可以通过以下代码获取页面中ID为“myDiv”的div元素：

var myDiv = document.getElementById("myDiv");

节点对象

节点对象是文档元素对象下的子节点。节点包括元素节点、文本节点、属性节点等。元素节点代表HTML或XML文档中的标签，文本节点代表HTML或XML文档中的文本内容，属性节点代表HTML或XML文档中的属性。

例如，我们可以通过以下代码获取一个元素节点的子节点列表：

var childNodes = element.childNodes;

DOM的基本操作：

DOM（文档对象模型）是一种能够方便地操作HTML和XML文档的API。DOM将文档中的每个元素都看作是一个对象，我们可以使用JavaScript来获取并修改这些对象的属性和内容。

以下是一些常见的DOM基本操作：

获取元素：

使用document对象的getElementById、getElementsByClassName、getElementsByTagName等方法可以获取HTML页面中的元素节点，然后可以对它们进行操作。例如：
 

// 通过id获取元素
let element = document.getElementById("myDiv");

// 通过类名获取元素
let elements = document.getElementsByClassName("myClass");

// 通过标签名获取元素
let elements = document.getElementsByTagName("p");

添加/删除元素：

使用createElement、appendChild、removeChild等方法可以在页面中添加或删除元素。例如：
 

// 创建新元素
let newElement = document.createElement("div");

// 将新元素添加到指定位置
document.body.appendChild(newElement);

// 删除指定元素
let oldElement = document.getElementById("myDiv");
document.body.removeChild(oldElement);

修改元素属性和样式：

通过修改元素的属性和样式，可以实现动态的效果。例如：
 

// 修改元素的文本内容
element.innerHTML = "新的文本内容";

// 修改元素的class属性
element.className = "newClass";

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

总之，DOM提供了丰富的API来操作HTML和XML文档，使得我们能够灵活地控制页面的内容和样式，从而实现各种复杂的交互效果。

DOM的事件机制：

DOM事件机制是指在Web中，当用户进行操作时，浏览器会产生相应的事件，并将其传递给对应的元素，开发人员可以通过JavaScript编写相关代码来处理这些事件。DOM事件包括鼠标事件、键盘事件、表单事件等多种类型，这些事件可以用来实现各种交互效果和功能。

当用户点击页面上的某个按钮时，浏览器会生成一个点击事件（click event），该事件会被传递给按钮元素，如果开发人员已经绑定了点击事件的处理函数，就能够在该处理函数中响应用户的操作。

<button id="myBtn">点击我</button>

接下来使用JavaScript代码为该按钮添加点击事件的处理函数：

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

这段代码使用addEventListener方法为按钮元素绑定了一个点击事件的处理函数，当用户点击按钮时，会弹出一个提示框显示“你点击了按钮！”。

DOM事件流指的是事件的传递顺序

分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

在捕获阶段中，事件从根节点开始向下传递，直到达到目标元素；

在目标阶段中，事件到达目标元素并触发，

然后开始向上冒泡直到根节点。开发人员可以通过event对象的stopPropagation方法来停止事件继续传递，或者使用preventDefault方法阻止默认行为。