JavaScript：DOM节点操作

htmledit_views">

DOM节点操作

节点操作的概述如下：

（1）创建节点：可以使用 DOM 提供的方法来创建新的节点，例如使用 createElement 方法创建元素节点，使用 createTextNode 方法创建文本节点等。

（2）添加节点：可以使用 appendChild 方法将一个节点添加到另一个节点的末尾，或者使用 insertBefore 方法将一个节点插入到指定位置。

（3）删除节点：可以使用 removeChild 方法从父节点中移除一个节点。

（4）替换节点：可以使用 replaceChild 方法将一个节点替换为另一个节点。

（5）修改节点：可以使用节点的属性和方法来修改节点的内容、样式等。例如，使用nodeValue 属性来修改文本节点的值，使用 setAttribute 和 removeAttribute 方法来修改或删除元素节点的属性。

（6）查询节点：可以使用查询节点的方法来获取文档中的节点。例如，使用 getElementById 方法根据 id 获取指定的元素节点，使用 getElementsByTagName 方法获取指定标签名的元素集合等。

1、创建节点 createElement()

要创建一个新的元素节点，可以使用document.createElement()方法。该方法接受一个参数，即要创建的元素的标签名。

以下是一个创建新节点的示例代码：

html" title=javascript>javascript">   <style>.myClass {color: blue;font-size: 20px;}</style></head><body><div id="parent"></div><script>//1.创建新的节点var newElement=document.createElement('div')//2.添加节点属性newElement.setAttribute('id','myDiv')newElement.setAttribute('class','myClass')//3.创建文本节点var newtext=document.createTextNode('Hello World')//使用appendChild()方法将其添加到新节点中newElement.appendChild(newtext)//4.获取父节点var parentEmelent=document.getElementById('parent')//使用appendChild()方法将新节点添加到父节点中parentEmelent.appendChild(newElement)//通过这些步骤，我们成功地创建了一个新节点，并将其添加到了HTML文档中。</script>

2.添加节点 appendChild()

要向现有的父节点中添加子节点，可以使用appendChild()方法。该方法接受一个参数，即要添加的子节点。

以下是一个向父节点添加子节点的示例代码：

html" title=javascript>javascript">// 1.获取父节点var parentElement = document.getElementById("parent");// 2.创建新节点var newElement = document.createElement("div");//3. 添加子节点到父节点中parentElement.appendChild(newElement);

在这个例子中，我们首先使用getElementById()方法获取了一个父节点。然后，我们使用createElement()方法创建了一个新的div元素节点。最后，我们使用appendChild()方法将新节点添加到父节点中。通过这些步骤，我们成功地向父节点中添加了一个子节点。

3.删除节点 removeChild()

要删除一个节点，可以使用removeChild()方法。该方法接受一个参数，即要删除的节点。

以下是一个删除节点的示例代码：

html" title=javascript>javascript">//1. 获取要删除的节点var elementToRemove = document.getElementById("element-to-remove");//2. 获取要删除节点的父节点var parentElement = elementToRemove.parentNode;// 3.从父节点中删除要删除的节点parentElement.removeChild(elementToRemove);

在这个例子中，我们首先使用getElementById()方法获取要删除的节点。然后，我们使用parentNode属性获取该节点的父节点。最后，我们使用removeChild()方法从父节点中删除要删除的节点。这样，我们成功地删除了指定的节点。

4、替换节点 replaceChild()

要替换一个节点，可以使用replaceChild()方法。该方法接受两个参数，第一个参数是要替换的新节点，第二个参数是要被替换的旧节点。

以下是一个替换节点的示例代码：

html" title=javascript>javascript">// 1.创建新节点var newElement = document.createElement("div");newElement.textContent = "这是新节点";//2. 获取要替换的旧节点var oldElement = document.getElementById("element-to-replace");// 3.获取要被替换节点的父节点var parentElement = oldElement.parentNode;//4. 替换旧节点为新节点parentElement.replaceChild(newElement, oldElement);

在这个例子中，我们首先使用createElement()方法创建了一个新节点，并设置了其文本内容。

然后，我们使用getElementById()方法获取要被替换的旧节点。

接下来，我们使用parentNode属性获取要被替换节点的父节点。最后，我们使用replaceChild()方法将新节点替换旧节点。这样，我们成功地替换了节点。

5、修改节点 innerHTML

要修改一个节点的内容，可以使用textContent属性或innerHTML属性来设置节点的新内容。

以下是一个修改节点内容的示例代码

html" title=javascript>javascript">// 1.获取要修改的节点var element = document.getElementById("element-to-modify");// 2.使用textContent属性修改节点内容element.textContent = "新的内容";// 3.使用innerHTML属性修改节点内容element.innerHTML = "<strong>新的内容</strong>";

6、查询节点 getElementById()

要查询节点，可以使用querySelector()方法或getElementById()方法来选择节点。

以下是一个查询节点的示例代码：

html" title=javascript>javascript">// 使用querySelector()方法查询节点var element1 = document.querySelector("#element-to-query");// 使用getElementById()方法查询节点var element2 = document.getElementById("element-to-query");// 打印查询到的节点console.log(element1);console.log(element2);

在这个例子中，我们首先使用querySelector()方法通过CSS选择器来查询节点。在querySelector()方法中，我们可以使用类名、标签名、ID等选择器来指定要查询的节点。

然后，我们使用getElementById()方法使用节点的ID来查询节点。最后，我们使用console.log()方法将查询到的节点打印出来。