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技术站