DOM节点的创建、删除和替换
节点的操作介绍
在Web开发中，通过操作DOM节点，可以动态地创建、删除和修改HTML文档的内容和结构。常见的节点操作包括创建节点、添加节点、删除节点和替换节点。
节点操作方法及用法
1、创建节点
document.createElement(tagName)：创建一个新的元素节点。
document.createTextNode(text)：创建一个新的文本节点。
var newDiv = document.createElement('div');
var newText = document.createTextNode('Hello, World!');2、添加节点
parentNode.appendChild(newNode)：将一个新的子节点添加到指定的父节点中。
parentNode.insertBefore(newNode, referenceNode)：在指定的参考节点之前插入一个新的子节点。
var parent = document.getElementById('parentElement');
parent.appendChild(newDiv);
parent.insertBefore(newDiv, referenceNode);3、删除节点
parentNode.removeChild(childNode)：从指定的父节点中删除一个子节点。
var child = document.getElementById('childElement');
parent.removeChild(child);4、替换节点
parentNode.replaceChild(newNode, oldNode)：用一个新的子节点替换指定的旧子节点。
var newChild = document.createElement('div');
parent.replaceChild(newChild, oldChild);案例代码
以下是一个示例，展示了如何进行节点的创建、添加、删除和替换操作。假设我们有一个简单的HTML文档，其中包含一个父元素和一些子元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>节点操作示例</title>
</head>
<body>
<div id="parentElement">
<p id="firstChild">这是第一个子元素。</p>
<p id="secondChild">这是第二个子元素。</p>
</div>
<button id="addButton">添加节点</button>
<button id="deleteButton">删除节点</button>
<button id="replaceButton">替换节点</button>
<script>
var parent = document.getElementById('parentElement');
// 创建新节点
var newDiv = document.createElement('div');
var newText = document.createTextNode('这是新添加的节点。');
newDiv.appendChild(newText);
// 添加节点
var addButton = document.getElementById('addButton');
addButton.addEventListener('click', function() {
parent.appendChild(newDiv);
});
// 删除节点
var deleteButton = document.getElementById('deleteButton');
deleteButton.addEventListener('click', function() {
var child = document.getElementById('secondChild');
if (child) {
parent.removeChild(child);
}
});
// 替换节点
var replaceButton = document.getElementById('replaceButton');
replaceButton.addEventListener('click', function() {
var oldChild = document.getElementById('firstChild');
var replacementDiv = document.createElement('div');
replacementDiv.textContent = '这是替换后的节点。';
if (oldChild) {
parent.replaceChild(replacementDiv, oldChild);
}
});
</script>
</body>
</html>练习题
请完成以下练习，以巩固对节点操作方法的理解：
创建一个HTML文件，包含以下内容：
一个<div>元素，ID为“container”，其中包含一个段落，内容为“这是一个段落。”。
两个按钮，ID分别为“addItem”和“removeItem”，内容分别为“添加项目”和“删除项目”。
使用JavaScript完成以下操作：
创建一个新的列表项（<li>元素），内容为“这是一个新项目。”。
为“添加项目”按钮添加点击事件，当按钮被点击时，将新创建的列表项添加到一个新的无序列表（<ul>）中，并将该列表添加到<div>元素中。
为“删除项目”按钮添加点击事件，当按钮被点击时，从无序列表中删除最后一个列表项。
参考答案：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>节点操作练习</title>
</head>
<body>
<div id="container">
<p>这是一个段落。</p>
</div>
<button id="addItem">添加项目</button>
<button id="removeItem">删除项目</button>
<script>
var container = document.getElementById('container');
// 创建新的列表项
var newItem = document.createElement('li');
newItem.textContent = '这是一个新项目。';
// 添加项目
var addItemButton = document.getElementById('addItem');
addItemButton.addEventListener('click', function() {
var ul = container.querySelector('ul') || document.createElement('ul');
ul.appendChild(newItem.cloneNode(true)); // 使用cloneNode创建副本，确保每次添加新的<li>
if (!container.contains(ul)) {
container.appendChild(ul);
}
});
// 删除项目
var removeItemButton = document.getElementById('removeItem');
removeItemButton.addEventListener('click', function() {
var ul = container.querySelector('ul');
if (ul && ul.lastElementChild) {
ul.removeChild(ul.lastElementChild);
}
});
</script>
</body>
</html>
需要购买本课才能留言哦~