【JavaScript】DOM节点详解：查找、增加和删除

最新推荐文章于 2024-10-11 17:39:47 发布

Peter-Lu

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量903

点赞数 29

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lph159/article/details/142134693

版权

JavaScript 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

DOM（Document Object Model）是浏览器用来解析和展示网页的核心模型。通过DOM，开发者能够使用编程语言（如JavaScript）动态地访问和修改网页内容。本篇文章将详细介绍DOM节点的概念，以及如何在网页中查找、增加和删除DOM节点。

一、DOM节点的基本概念

1. 什么是DOM节点

DOM是网页的树形结构，节点（Node）是DOM的基本组成单位。一个网页中的每个元素、属性、文本、注释等都可以看作是DOM中的一个节点。浏览器通过解析HTML文档，将其转换为DOM树，并允许开发者通过JavaScript对这棵树进行操作。

常见的节点类型包括：

元素节点（Element Node）：代表HTML标签，如<div>、<p>。
文本节点（Text Node）：代表元素中的文本内容。
属性节点（Attribute Node）：代表元素的属性，如class、id。
注释节点（Comment Node）：代表HTML中的注释部分。

2. DOM节点的层次结构

DOM树是一种层级结构，树的根节点通常是<html>元素。每个节点之间具有父子关系：

父节点（Parent Node）：包含其他节点的节点，如<div>元素可以包含多个子元素。
子节点（Child Node）：嵌套在父节点中的节点，如<div>中的<p>。
兄弟节点（Sibling Node）：同一父节点下的节点彼此之间是兄弟关系。

通过DOM的层次结构，开发者可以轻松地遍历页面中的各个部分。

二、查找DOM节点

在操作DOM时，首先需要找到特定的节点。JavaScript提供了多种方法来查找DOM节点。

1. 使用`getElementById`

getElementById是查找单个元素节点的最快方法，它根据元素的id属性返回该元素。id在文档中应该是唯一的。

let element = document.getElementById('example');

2. 使用`getElementsByClassName`

getElementsByClassName返回具有指定类名的所有元素。它返回的是一个类数组（NodeList），你可以通过索引访问每个元素。

let elements = document.getElementsByClassName('example-class');

3. 使用`getElementsByTagName`

getElementsByTagName根据标签名返回所有匹配的元素，常用于查找某类标签（如<div>、<p>等）。

let paragraphs = document.getElementsByTagName('p');

4. 使用`querySelector`和`querySelectorAll`

querySelector和querySelectorAll是更加灵活的查找方法，它们允许你使用CSS选择器查找元素。querySelector返回第一个匹配的元素，而querySelectorAll返回所有匹配的元素。

let firstElement = document.querySelector('.example-class');
let allElements = document.querySelectorAll('.example-class');

5. 遍历DOM节点

DOM还提供了一些方法来遍历节点树，例如：

parentNode：获取当前节点的父节点。
childNodes：获取当前节点的所有子节点。
nextSibling和previousSibling：分别获取当前节点的下一个和上一个兄弟节点。

let parent = element.parentNode;
let children = element.childNodes;
let nextElement = element.nextSibling;

三、增加DOM节点

除了查找，开发者还可以动态增加DOM节点。常见的增加节点的方法有appendChild、insertBefore等。

1. 使用`createElement`创建新节点

要增加一个新节点，首先需要创建它。createElement方法可以创建指定类型的元素节点。

let newElement = document.createElement('div');

2. 使用`appendChild`增加节点

appendChild方法将新创建的节点添加到父节点的子节点列表末尾。

let container = document.getElementById('container');
container.appendChild(newElement);

3. 使用`insertBefore`插入节点

如果想将节点插入到特定位置，可以使用insertBefore。它需要指定要插入的节点和参考节点。

let referenceNode = document.getElementById('reference');
container.insertBefore(newElement, referenceNode);

4. 动态创建文本节点

文本节点可以通过createTextNode方法创建，常用于向已有元素中添加文本。

let textNode = document.createTextNode('Hello, World!');
newElement.appendChild(textNode);

四、删除DOM节点

在某些情况下，你可能需要从文档中移除节点。JavaScript提供了多种方法来删除节点。

1. 使用`removeChild`删除子节点

removeChild是删除子节点的常用方法，需要指定要删除的节点。

let child = document.getElementById('child-element');
container.removeChild(child);

2. 使用`remove`直接删除节点

较新的remove方法允许直接删除节点，而无需通过其父节点。

let element = document.getElementById('element-to-remove');
element.remove();

3. 清空元素的内容

如果只想移除元素的所有子节点，而保留元素本身，可以使用innerHTML属性将其内容清空。

container.innerHTML = '';

五、DOM节点操作的实际应用场景

DOM节点的增删改查操作在实际开发中有广泛的应用。以下是一些常见的应用场景：

1. 动态生成列表

在电子商务网站上，通常需要根据用户选择动态生成商品列表。开发者可以使用createElement和appendChild方法，根据API返回的数据动态生成商品卡片。

let productList = document.getElementById('product-list');
data.forEach(product => {
  let productItem = document.createElement('li');
  productItem.textContent = product.name;
  productList.appendChild(productItem);
});

2. 表单的动态验证

在表单验证过程中，开发者可以根据用户输入，动态添加或删除错误提示信息。

if (!isValid) {
  let errorMessage = document.createElement('span');
  errorMessage.textContent = '输入有误';
  form.appendChild(errorMessage);
}

3. 实现加载更多功能

在实现“加载更多”功能时，可以使用removeChild或innerHTML清空旧的数据，然后使用appendChild插入新加载的数据。

loadMoreButton.addEventListener('click', () => {
  container.innerHTML = '';  // 清空旧内容
  fetchNewData().then(data => {
    data.forEach(item => {
      let newItem = document.createElement('div');
      newItem.textContent = item.name;
      container.appendChild(newItem);
    });
  });
});