js实现节点
在 JavaScript 中实现节点操作
创建节点
使用 document.createElement() 方法可以创建一个新的 DOM 节点。该方法接受一个参数，即要创建的元素的标签名。
const newDiv = document.createElement('div');创建文本节点可以使用 document.createTextNode() 方法：
const textNode = document.createTextNode('这是一个文本节点');添加节点
使用 appendChild() 方法可以将一个节点添加到另一个节点的子节点列表末尾：
const parentElement = document.getElementById('parent');
parentElement.appendChild(newDiv);使用 insertBefore() 方法可以在指定子节点前插入新节点：
const referenceElement = document.getElementById('child');
parentElement.insertBefore(newDiv, referenceElement);删除节点
使用 removeChild() 方法可以从 DOM 中删除一个子节点：
parentElement.removeChild(referenceElement);现代 JavaScript 也提供了更直接的 remove() 方法：
referenceElement.remove();替换节点
使用 replaceChild() 方法可以替换一个子节点：
const newElement = document.createElement('span');
parentElement.replaceChild(newElement, referenceElement);克隆节点
使用 cloneNode() 方法可以克隆一个节点：
const clonedNode = referenceElement.cloneNode(true); // true 表示深克隆，包括所有子节点节点属性操作
使用 setAttribute() 和 getAttribute() 方法可以设置和获取节点的属性：
newDiv.setAttribute('id', 'newDiv');
const idValue = newDiv.getAttribute('id');样式操作
可以直接通过 style 属性来操作节点的样式：
newDiv.style.color = 'red';
newDiv.style.backgroundColor = '#f0f0f0';类名操作
使用 classList 可以方便地操作节点的类名：
newDiv.classList.add('active');
newDiv.classList.remove('inactive');
newDiv.classList.toggle('visible');事件监听
使用 addEventListener() 方法可以为节点添加事件监听：
newDiv.addEventListener('click', function() {
console.log('Div 被点击了');
});遍历节点
可以使用以下属性遍历节点树：
const parent = newDiv.parentNode;
const firstChild = parent.firstChild;
const nextSibling = firstChild.nextSibling;
const children = parent.children; // 只获取元素节点节点关系判断
使用 contains() 方法可以判断一个节点是否是另一个节点的后代：
const isDescendant = parent.contains(newDiv);节点位置获取
使用 getBoundingClientRect() 方法可以获取节点在视口中的位置和尺寸：
const rect = newDiv.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);自定义数据属性
HTML5 引入了 data-* 属性，可以通过 dataset 访问：
newDiv.dataset.userId = '12345';
const userId = newDiv.dataset.userId;性能优化
当需要批量操作 DOM 时，可以考虑使用 DocumentFragment 来提高性能：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);现代 API
现代 JavaScript 提供了更简洁的 DOM 操作方式，如 insertAdjacentHTML()：
document.getElementById('container').insertAdjacentHTML('beforeend', '<div>新内容</div>');虚拟 DOM 概念
虽然原生 JavaScript 可以直接操作 DOM，但在复杂应用中，可以考虑使用虚拟 DOM 库（如 React 的虚拟 DOM）来提高性能。虚拟 DOM 通过在内存中维护一个 DOM 的轻量级表示，减少直接操作真实 DOM 的次数。
注意事项
直接操作 DOM 是资源密集型操作，频繁的 DOM 操作会导致页面重绘和回流，影响性能。建议将多个 DOM 操作批量处理，或使用文档片段（DocumentFragment）来优化性能。
