JavaScript DOM操作方法有哪些？

JavaScript DOM 方法

JavaScript DOM (Document Object Model) 提供了一组方法和属性，允许开发者对网页中的文档进行操作，以下是一些常用的 JavaScript DOM 方法：

1. getElementById

getElementById 方法用于获取具有指定 ID 的元素。

var element = document.getElementById("myElementId");

2. getElementsByClassName

getElementsByClassName 方法用于获取具有指定类名的所有元素。

var elements = document.getElementsByClassName("myClassName");

3. getElementsByTagName

getElementsByTagName 方法用于获取具有指定标签名的所有元素。

var elements = document.getElementsByTagName("p");

4. querySelector

querySelector 方法返回文档中匹配指定的 CSS 选择器的第一个元素。

var element = document.querySelector(".myClassName");

5. querySelectorAll

querySelectorAll 方法返回文档中匹配指定的 CSS 选择器的所有元素的 NodeList。

var elements = document.querySelectorAll(".myClassName");

6. createElement

createElement 方法创建一个新的元素节点。

var newElement = document.createElement("div");

7. createTextNode

createTextNode 方法创建一个新的文本节点。

var textNode = document.createTextNode("Hello, World!");

8. appendChild

appendChild 方法将一个节点添加到指定父节点的子节点列表的末尾。

parentElement.appendChild(newElement);

9. insertBefore

insertBefore 方法在参考节点之前插入一个节点。

parentElement.insertBefore(newElement, referenceElement);

10. removeChild

removeChild 方法从 DOM 中删除一个子节点。

parentElement.removeChild(childElement);

11. replaceChild

replaceChild 方法替换指定父节点的一个子节点为新的节点。

parentElement.replaceChild(newElement, oldElement);

12. addEventListener

addEventListener 方法向指定元素添加事件处理程序。

element.addEventListener("click", function() {
    console.log("Element clicked!");
});

常见问题与解答

Q1:getElementById 和querySelector 有什么区别？

A1:getElementById 通过元素的 ID 来查找元素，而querySelector 可以使用任何有效的 CSS 选择器来查找元素，如果页面中有多个元素具有相同的 ID（虽然不推荐），getElementById 只会返回第一个匹配的元素，而querySelector 会返回第一个匹配的元素，但不会检查是否有重复的 ID。

Q2:appendChild 和insertBefore 的区别是什么？

A2:appendChild 将新节点添加到父节点的子节点列表的末尾，而insertBefore 允许你指定新节点应该插入的位置，你需要传递两个参数给insertBefore：要插入的新节点和参考节点（新节点将被插入到这个节点之前），如果没有提供参考节点，新节点将被添加到子节点列表的末尾。