js操作节点的方法有哪些？

JavaScript 提供了多种操作节点的方法，大致可以分为以下几类：

1. 获取节点:

• getElementById(id): 通过 ID 获取单个元素，是最常用的方法之一。
• getElementsByTagName(tagName): 通过标签名获取元素集合，例如获取所有 <p> 元素。
• getElementsByClassName(className): 通过类名获取元素集合。
• querySelector(selectors): 根据 CSS 选择器获取第一个匹配的元素。功能强大且灵活。
• querySelectorAll(selectors): 根据 CSS 选择器获取所有匹配的元素集合。

2. 创建节点:

• createElement(tagName): 创建一个指定类型的元素节点，例如 createElement('div') 创建一个 <div> 元素。
• createTextNode(text): 创建一个文本节点。

3. 添加节点:

• appendChild(childNode): 将子节点添加到父节点的末尾。
• insertBefore(newNode, referenceNode): 将新节点插入到参考节点的前面。

4. 删除节点:

• removeChild(childNode): 从父节点中删除指定的子节点。
• remove(): 节点自身调用，将自身从父节点中移除。 (较新的方法，兼容性需要注意)

5. 替换节点:

• replaceChild(newChild, oldChild): 用新节点替换旧节点。

6. 修改节点:

• 修改节点属性: 可以直接访问和修改节点的属性，例如 element.id = 'newId'，element.className = 'newClass'，element.setAttribute('attributeName', 'attributeValue')，element.removeAttribute('attributeName')。
• 修改节点内容:
  • innerHTML: 获取或设置元素的 HTML 内容 (需要注意安全性，避免 XSS 攻击)。
  • textContent: 获取或设置元素的纯文本内容，更安全。
  • nodeValue (对于文本节点): 获取或设置文本节点的值。

7. 其他常用方法:

• cloneNode(deep): 复制节点，deep 为 true 时进行深度复制 (包括子节点)，false 时进行浅复制 (只复制节点本身)。
• parentNode: 获取父节点。
• childNodes: 获取子节点集合 (包括文本节点和元素节点)。
• children: 获取子元素集合 (只包含元素节点)。
• nextSibling: 获取下一个兄弟节点。
• previousSibling: 获取上一个兄弟节点。
• firstChild: 获取第一个子节点。
• lastChild: 获取最后一个子节点。
• contains(otherNode): 检查一个节点是否包含另一个节点。

示例：

// 获取节点
const myDiv = document.getElementById('myDiv');
const paragraphs = document.getElementsByTagName('p');

// 创建节点
const newParagraph = document.createElement('p');
const newText = document.createTextNode('This is a new paragraph.');

// 添加节点
newParagraph.appendChild(newText);
myDiv.appendChild(newParagraph);

// 删除节点
myDiv.removeChild(newParagraph);

// 修改节点内容
myDiv.innerHTML = '<p>New content</p>';

希望这些信息对您有所帮助! 请根据您的具体需求选择合适的方法。 记住要检查浏览器兼容性，特别是使用较新的 API 时。