JavaScript知识点总结之DOM-猿码集

1. DOM介绍

DOM（文档对象模型，Document Object Model）是JavaScript的一个重要的API。它通过将HTML或XML文档转化为结构化的对象模型，然后可以通过JavaScript来访问和操作这些对象。DOM可以帮助我们在网页上动态的插入、删除和修改元素，从而使网页有更好的用户交互性。

DOM是一种独立于编程语言的文档对象模型，它代表了HTML或XML的文档，它定义了访问文档内容的方式，而JavaScript是根据DOM规范来处理文档内容的对象模型API之一。

1.1 DOM的树状结构

DOM的树形结构层级依次为：Document→Element→Attribute→Text(文本)。

我们可以使用document对象来获取页面的HTML结构，也就是文档的根节点。


// 获取元素
var el = document.documentElement;
console.log(el); //输出文档的根节点

1.2 DOM元素的获取和操作

在HTML文档中，我们可以使用标签、class、ID来定位元素，并对元素进行操作。

在JavaScript中，我们可以使用各种方法来获取元素，最基本的有以下三种方法：

document.getElementById(id)：通过元素的ID属性来获取该元素。

document.getElementsByTagName(tagName)：通过元素的标签名来获取一组元素。

document.getElementsByClassName(className)：通过元素的class属性来获取一组元素。

获取元素之后，我们可以对元素进行各种操作，比如修改样式、添加/删除/更新内容等等。

2. DOM的节点遍历和操作

DOM提供了一些方法来访问、遍历节点，以及删除、替换和插入节点，从而方便地操作DOM节点。

2.1 节点遍历

DOM节点是树状结构，我们可以使用childNodes、firstChild、lastChild、parentNode、nextSibling、previousSibling等属性或方法来访问节点。

例如，我们可以使用childNodes获取元素的子节点，并遍历修改每个子节点的内容：


var ul = document.getElementById("list");
var lis = ul.childNodes; //获取子节点
for (var i = 0; i < lis.length; i++) {
  if (lis[i].nodeType == 1) { //判断是否为元素节点
    lis[i].innerHTML = "这是第" + (i+1) + "项"; 
  }
}

2.2 节点操作

DOM提供了一些方法来操作节点，包括添加、替换、移除、克隆节点等等。

2.2.1 添加节点

我们可以使用appendChild、insertBefore等方法向DOM树中添加节点。

例如，我们可以向列表中添加一项：


var ul = document.getElementById("list");
var li = document.createElement("li");
li.innerHTML = "新添加的项";
ul.appendChild(li); //将li作为最后一个子节点添加到ul之后

2.2.2 替换节点

我们可以使用replaceChild方法从DOM树中替换一个节点。

例如，我们可以将列表中第一项修改为"替换后的项"：


var ul = document.getElementById("list");
var li = document.createElement("li");
li.innerHTML = "替换后的项";
ul.replaceChild(li, ul.firstChild); //用li替换第一个子节点

2.2.3 移除节点

我们可以使用removeChild方法从DOM树中移除一个节点。

例如，我们可以移除列表中第一项：


var ul = document.getElementById("list");
ul.removeChild(ul.firstChild); //移除第一个子节点

2.2.4 克隆节点

我们可以使用cloneNode方法克隆节点。

例如，我们可以克隆列表中第一项，然后将克隆的节点添加到列表末尾：


var ul = document.getElementById("list");
var cloneLi = ul.firstChild.cloneNode(true); //克隆第一个子节点（需要深复制）
ul.appendChild(cloneLi); //将克隆的节点作为最后一个子节点添加到ul之后

3. 事件处理与事件对象

在DOM中，事件是用户和浏览器之间的交互行为，例如单击、双击、鼠标移动等等。通过JavaScript的事件处理机制，我们可以在特定的时间点上触发函数，并对触发事件的元素进行操作。

3.1 事件处理

我们可以使用addEventListener方法为元素添加事件监听器。

例如，我们可以在列表上添加单击事件监听器：


var ul = document.getElementById("list");
ul.addEventListener("click", function(event) {
  console.log(event.target.innerHTML); //输出单击目标元素的内容
});

3.2 事件对象

当事件被触发时，相关信息会被封装在一个事件对象中，我们可以通过事件对象来获取这些信息。

例如，在前面的例子中，我们可以通过事件对象来获取单击目标元素的内容：


var ul = document.getElementById("list");
ul.addEventListener("click", function(event) {
  console.log(event.target.innerHTML); //输出单击目标元素的内容
});

我们可以使用event.target获取事件的目标元素，注意在事件处理器函数中，this关键字指向的就是目标元素。

4. 总结

DOM是JavaScript中非常重要的一个API，它提供了一系列方法和属性，使我们可以方便地访问和操作页面的元素和内容。节点遍历和操作、事件处理和事件对象是DOM的重要内容，我们的网页开发工作离不开DOM的使用。

JavaScript知识点总结之DOM