DOM节点操作
节点操作的概述如下:
(1)创建节点:可以使用 DOM 提供的方法来创建新的节点,例如使用 createElement 方法创建元素节点,使用 createTextNode 方法创建文本节点等。
(2)添加节点:可以使用 appendChild 方法将一个节点添加到另一个节点的末尾,或者使用 insertBefore 方法将一个节点插入到指定位置。
(3)删除节点:可以使用 removeChild 方法从父节点中移除一个节点。
(4)替换节点:可以使用 replaceChild 方法将一个节点替换为另一个节点。
(5)修改节点:可以使用节点的属性和方法来修改节点的内容、样式等。例如,使用nodeValue 属性来修改文本节点的值,使用 setAttribute 和 removeAttribute 方法来修改或删除元素节点的属性。
(6)查询节点:可以使用查询节点的方法来获取文档中的节点。例如,使用 getElementById 方法根据 id 获取指定的元素节点,使用 getElementsByTagName 方法获取指定标签名的元素集合等。
1、创建节点 createElement()
要创建一个新的元素节点,可以使用document.createElement()方法。该方法接受一个参数,即要创建的元素的标签名。
以下是一个创建新节点的示例代码:
<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()方法。该方法接受一个参数,即要添加的子节点。
以下是一个向父节点添加子节点的示例代码:
// 1.获取父节点
var parentElement = document.getElementById("parent");
// 2.创建新节点
var newElement = document.createElement("div");
//3. 添加子节点到父节点中
parentElement.appendChild(newElement);
在这个例子中,我们首先使用getElementById()方法获取了一个父节点。然后,我们使用createElement()方法创建了一个新的div元素节点。最后,我们使用appendChild()方法将新节点添加到父节点中。通过这些步骤,我们成功地向父节点中添加了一个子节点。
3.删除节点 removeChild()
要删除一个节点,可以使用removeChild()方法。该方法接受一个参数,即要删除的节点。
以下是一个删除节点的示例代码:
//1. 获取要删除的节点
var elementToRemove = document.getElementById("element-to-remove");
//2. 获取要删除节点的父节点
var parentElement = elementToRemove.parentNode;
// 3.从父节点中删除要删除的节点
parentElement.removeChild(elementToRemove);
在这个例子中,我们首先使用getElementById()方法获取要删除的节点。然后,我们使用parentNode属性获取该节点的父节点。最后,我们使用removeChild()方法从父节点中删除要删除的节点。这样,我们成功地删除了指定的节点。
4、替换节点 replaceChild()
要替换一个节点,可以使用replaceChild()方法。该方法接受两个参数,第一个参数是要替换的新节点,第二个参数是要被替换的旧节点。
以下是一个替换节点的示例代码:
// 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属性来设置节点的新内容。
以下是一个修改节点内容的示例代码
// 1.获取要修改的节点
var element = document.getElementById("element-to-modify");
// 2.使用textContent属性修改节点内容
element.textContent = "新的内容";
// 3.使用innerHTML属性修改节点内容
element.innerHTML = "<strong>新的内容</strong>";
6、查询节点 getElementById()
要查询节点,可以使用querySelector()方法或getElementById()方法来选择节点。
以下是一个查询节点的示例代码:
// 使用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()方法将查询到的节点打印出来。
7.总结
以下是总结节点操作的表格形式:
通过以上表格,可以清晰地了解节点操作的不同类型及其描述。这些操作可用于对表格进行增删改查等操作,以实现对表格数据的动态更新和操作。