跳到主要内容

DOM怎样添加、移除、移动、复制、创建和查找节点

参考答案：

DOM（Document Object Model）提供了一种编程接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。以下是如何使用DOM来添加、移除、移动、复制、创建和查找节点的基本方法：

  1. 创建节点

使用document.createElement()方法创建一个新的元素节点。例如，要创建一个新的<div>元素，可以这样做：

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

  1. 添加节点

    • 添加到文档的末尾：使用appendChild()方法将新节点添加到父节点的末尾。
    	javascript`document.body.appendChild(newDiv);`
    • 添加到文档的特定位置：使用insertBefore()方法将新节点插入到父节点的特定位置。
    	javascript`let referenceNode = document.getElementById('someId');
	document.body.insertBefore(newDiv, referenceNode);`

  2. 移除节点

使用removeChild()方法从父节点中移除一个子节点。

let nodeToRemove = document.getElementById('someId');
nodeToRemove.parentNode.removeChild(nodeToRemove);
  1. 移动节点

移动节点通常涉及到先移除节点，然后再将其添加到新的位置。例如，将nodeToRemove从一个父节点移动到另一个父节点：

let nodeToRemove = document.getElementById('someId');
nodeToRemove.parentNode.removeChild(nodeToRemove);
newParentNode.appendChild(nodeToRemove);
  1. 复制节点

使用cloneNode()方法复制一个节点。此方法接受一个布尔参数，指示是否深度复制（包括子节点）：

let clonedNode = nodeToRemove.cloneNode(true); // true 表示深度复制

  1. 查找节点

    • 通过ID查找：使用document.getElementById()方法。
    	javascript`let nodeById = document.getElementById('someId');`
    • 通过类名查找：使用document.getElementsByClassName()方法。
    	javascript`let nodesByClass = document.getElementsByClassName('someClass');`
    • 通过标签名查找：使用document.getElementsByTagName()方法。
    	javascript`let nodesByTag = document.getElementsByTagName('div');`
    • 通过CSS选择器查找：使用document.querySelector()或document.querySelectorAll()方法。
    	javascript`let nodeBySelector = document.querySelector('.someClass');
	let nodesBySelector = document.querySelectorAll('.someClass');`

这些只是DOM操作的基本方法。实际上，DOM API提供了许多其他功能和方法，允许你更精细地控制和操作文档的结构和内容。