JS DOM遍历与操作

遍历节点

1. 获取父节点、子节点和兄弟节点:

可以使用以下属性来获取节点的父节点、子节点和兄弟节点：

· parentNode: 获取节点的父节点。

· childNodes: 获取节点的所有子节点（包括文本节点和注释节点）。

· firstChild: 获取节点的第一个子节点。

· lastChild: 获取节点的最后一个子节点。

· previousSibling: 获取节点的前一个兄弟节点。

· nextSibling: 获取节点的下一个兄弟节点。

例如：

let element = document.getElementById("myElement");
// 获取父节点
let parent = element.parentNode;
// 获取子节点
let children = element.childNodes;
// 获取第一个子节点
let firstChild = element.firstChild;
// 获取最后一个子节点
let lastChild = element.lastChild;
// 获取前一个兄弟节点
let previousSibling = element.previousSibling;
// 获取下一个兄弟节点
let nextSibling = element.nextSibling;

2. 遍历元素的子元素:

可以使用children属性来获取元素的子元素，它返回一个只包含元素节点的集合。例如：

let element = document.getElementById("myElement");
// 获取子元素
let children = element.children;
// 遍历子元素
for (let i = 0; i < children.length; i++) {
    let child = children[i];
    console.log(child);
}

修改节点

1. 创建和插入新节点:

可以使用createElement方法创建新的元素节点，使用createTextNode方法创建新的文本节点，然后使用appendChild方法将新节点插入到指定位置。例如：

let parent = document.getElementById("parent");
// 创建新元素节点
let newElement = document.createElement("div");
newElement.innerHTML = "New element";
// 创建新文本节点
let newText = document.createTextNode("New text");
// 插入新节点
parent.appendChild(newElement); // 在父节点最后插入
parent.insertBefore(newElement, parent.firstChild); // 在父节点第一个子节点前插入
parent.appendChild(newText); // 在父节点最后插入文本节点

2. 复制、删除和替换节点:

可以使用cloneNode方法复制节点，使用removeChild方法删除节点，使用replaceChild方法替换节点。例如：

let parent = document.getElementById("parent");
let element = parent.firstElementChild;
// 复制节点
let clone = element.cloneNode(true);
// 删除节点
parent.removeChild(element);
// 替换节点
let newElement = document.createElement("div");
newElement.innerHTML = "New element,www.dotcpp.com";
parent.replaceChild(newElement, element);

3. 修改节点的文本内容:

可以使用nodeValue属性来修改节点的文本内容。例如：

let element = document.getElementById("myElement");
// 修改节点的文本内容
element.firstChild.nodeValue = "New text，www.dotcpp.com";

注意

在进行DOM遍历与操作时，有一些要注意的事项：

1. 节点类型判断：在遍历childNodes或children时，需要判断节点的类型。因为childNodes返回的节点集合包含文本节点和注释节点，而children只返回元素节点。

2. 子节点的动态性：当对节点的子节点进行增加、删除或替换操作时，childNodes和children集合会随之改变。因此，在遍历这些集合时，最好通过创建副本或使用for循环中的索引进行遍历，以避免出现意料之外的结果。

3. 元素的实时更新：在修改节点的属性、样式或文本内容时，浏览器会立即反映这些更改，并重新渲染页面。因此，如果对多个元素进行频繁的修改操作，可能会导致性能问题。为了优化性能，可以考虑将多个操作合并为一个操作，或使用DocumentFragment来进行离线操作。

4. 元素的存在性检查：在获取父节点、子节点或兄弟节点之前，最好先检查它们是否存在。如果节点不存在，那么尝试访问它们可能会引发错误。可以使用条件语句如if来检查节点是否存在，或使用nullish合并运算符（??）来提供默认值。

5. 跨域限制：在跨域场景下，对其他域的DOM元素进行操作可能会受到浏览器的安全策略限制。如果涉及到跨域操作，可以使用CORS（跨域资源共享）的机制来解决问题。

总之，在进行DOM遍历与操作时，需要谨慎处理节点类型、动态更新、性能优化和安全限制等方面的问题，以确保操作正确且高效。