JavaScript 学习笔记（十二） dom

### JavaScript DOM 操作详解 #### 一、DOM 概述 DOM（Document Object Model），即文档对象模型，是用于表示和操作HTML或XML文档的一种树形结构。在Web开发中，DOM提供了对文档进行访问和操作的一系列接口，使得开发者能够通过JavaScript动态地改变页面的内容、结构以及样式。 #### 二、DOM 基本操作 ##### 1. 创建新节点 DOM提供了几种方法来创建新的节点： - **`createElement()`**：创建一个指定标签名的新元素。 - **`createTextNode()`**：创建一个新的文本节点。 - **`createDocumentFragment()`**：创建一个新的文档碎片节点。 示例代码展示了如何使用`createElement()`创建一个新的`<p>`元素，并将其添加到页面中： ```javascript function creatNode() { var oP = document.createElement("p"); oP.innerHTML = "<font style='color:red;'>Hello World！</font>"; document.body.appendChild(oP); } ``` 其中，`document.createElement("p")`创建了一个`<p>`元素，`oP.innerHTML`设置了该元素的内容，最后使用`document.body.appendChild(oP)`将新创建的`<p>`元素添加到`body`中。 ##### 2. 删除节点 可以使用`removeChild()`方法来移除已存在的节点。该方法需要一个参数，即要被移除的节点。示例代码展示了如何删除页面中的最后一个`<p>`元素： ```javascript function removeNode() { var oP = document.getElementsByTagName("p"); var len = oP.length; if (len != 0) { oP[len - 1].parentNode.removeChild(oP[len - 1]); // 使用节点的parentNode特性来删除 } else { alert("已经全部删除！"); } } ``` 这里首先获取所有`<p>`元素，然后根据它们的数量来判断是否执行删除操作。若存在`<p>`元素，则删除最后一个。 ##### 3. 替换节点 使用`replaceChild()`方法可以替换现有的子节点。该方法需要两个参数：要插入的新节点和要被替换的旧节点。下面的示例代码展示了如何替换最后一个`<p>`元素： ```javascript function replaceNode() { var oNewP = document.createElement("p"); oNewP.innerHTML = "<font style='color:red;'>New-->Hello World！</font>"; var len = document.getElementsByTagName("p").length; var oOldLastP = document.getElementsByTagName("p")[len - 1]; oOldLastP.parentNode.replaceChild(oNewP, oOldLastP); } ``` 该代码首先创建一个新的`<p>`元素并设置其内容，然后找到最后一个`<p>`元素并将其替换为新创建的`<p>`元素。 ##### 4. 在指定节点前插入节点 `insertBefore()`方法允许在指定节点前插入新节点。该方法接收两个参数：要添加的节点和要在其前面插入的现有节点。具体实现方式如下： ```javascript function insertBefore() { var newChild = document.createElement("div"); newChild.innerHTML = "我是新添加的div"; var oldChild = document.getElementById("someId"); // 假设有一个id为"someId"的元素 oldChild.parentNode.insertBefore(newChild, oldChild); } ``` 在这个例子中，我们创建了一个新的`<div>`元素，并将其插入到id为"someId"的元素之前。 ##### 5. 创建文档碎片 `createDocumentFragment()`方法用于创建一个文档碎片，可以将多个节点添加到碎片中，然后再一次性添加到文档中。这种方式可以提高性能，因为减少了DOM操作的次数。下面的代码展示了如何使用文档碎片来添加多个新节点： ```javascript function useDocumentFragment() { var oFragment = document.createDocumentFragment(); for (var i = 0; i < 10; i++) { var oDiv = document.createElement("div"); oDiv.textContent = "这是第 " + (i + 1) + " 个div"; oFragment.appendChild(oDiv); } document.body.appendChild(oFragment); } ``` 这段代码创建了10个`<div>`元素，并将它们依次添加到文档碎片中。整个文档碎片被添加到`body`中，而不是逐一添加每个`<div>`，从而提高了效率。 通过以上介绍，我们可以看到DOM提供了一系列强大的API来帮助开发者灵活地操作网页元素。掌握这些基本操作对于前端开发人员来说是非常重要的，它不仅能够帮助优化页面性能，还能增强用户交互体验。