JavaScript节点的增删改查深入学习
本文将详细讲解JavaScript中节点的增删改查操作，内容包括选择节点、创建节点、修改节点和删除节点。在讲解过程中，我们将使用两个示例进行说明。
一、选择节点
在JavaScript中选择节点可以使用 document.querySelector() 和 document.querySelectorAll() 方法。
1. document.querySelector()
document.querySelector() 方法用于选择第一个匹配的元素，语法如下：
var element = document.querySelector(selector);
其中 selector 参数接收一个CSS选择器作为输入，element 变量是一个 DOM 对象，表示选中的第一个元素。
示例：选中id为 "example" 的元素
<!DOCTYPE html>
<html>
<body>
<div id="example">Hello World!</div>
<script>
const element = document.querySelector('#example');
console.log(element.textContent); // 输出：Hello World!
</script>
</body>
</html>
2. document.querySelectorAll()
document.querySelectorAll() 方法用于选择所有匹配的元素，返回的是一个NodeList对象，可以使用 forEach() 方法遍历 NodeList 对象。
var elementList = document.querySelectorAll(selector);
其中 selector 参数同样接收一个CSS选择器作为输入，elementList 变量表示选中的所有元素。
示例：选中所有class为 "example" 的元素，并修改文本内容
<!DOCTYPE html>
<html>
<body>
<div class="example">Hello</div>
<div class="example">World</div>
<script>
const elementList = document.querySelectorAll('.example');
elementList.forEach(element => {
element.textContent += '!';
});
</script>
</body>
</html>
二、创建节点
在JavaScript中，我们可以使用 document.createElement() 方法创建新节点，然后添加到页面中。
var element = document.createElement(tagName);
其中 tagName 参数是标记名称，比如 "div"、"p"、"ul" 等等。
示例：创建新的段落，并添加到页面中
<!DOCTYPE html>
<html>
<body>
<script>
const para = document.createElement('p');
const node = document.createTextNode('Hello World!');
para.appendChild(node);
const body = document.querySelector('body');
body.appendChild(para);
</script>
</body>
</html>
三、修改节点
在JavaScript中，我们可以修改节点的文本内容，属性和样式。
1. 修改文本内容
要修改节点的文本内容，可以修改 textContent 属性：
element.textContent = 'New Text';
示例：修改id为 "example" 的元素的文本内容
<!DOCTYPE html>
<html>
<body>
<div id="example">Hello World!</div>
<script>
const element = document.querySelector('#example');
element.textContent = 'New Text';
</script>
</body>
</html>
2. 修改属性
要修改节点的属性，可以使用 setAttribute() 方法：
element.setAttribute(attributeName, attributeValue);
其中 attributeName 为属性名，attributeValue 为属性值。比如，设置一个img标签的src属性：
const img = document.querySelector('img');
img.setAttribute('src', 'new_image.jpg');
3. 修改样式
要修改节点的样式，可以修改 style 属性：
element.style.propertyName = propertyValue;
其中 propertyName 为CSS属性名，propertyValue 为CSS属性值。比如，设置一个div标签的背景色为红色：
const div = document.querySelector('div');
div.style.backgroundColor = 'red';
四、删除节点
在JavaScript中，我们可以使用以下方法删除节点：
1. remove() 方法
删除一个节点，可以使用 remove() 方法：
element.remove();
其中 element 为要删除的节点。
2. parentNode.removeChild() 方法
删除一个节点的某个子节点，可以使用 parentNode.removeChild() 方法：
parentNode.removeChild(childNode);
其中 parentNode 为要删除子节点的父节点，childNode 为要删除的子节点。
示例：删除id为 "example" 的元素
<!DOCTYPE html>
<html>
<body>
<div id="example">Hello World!</div>
<script>
const element = document.querySelector('#example');
element.parentNode.removeChild(element);
</script>
</body>
</html>
以上就是 JavaScript 节点的增删改查的深入学习攻略。希望本文可以帮助你理解并掌握相关知识点。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript节点的增删改查深入学习 - Python技术站
微信扫一扫 
支付宝扫一扫 