JavaScript DOM（Document Object Model）树是一种用于表示HTML文档结构的模型，它允许开发者通过编程方式操作和访问网页元素。
JS DOM树简介
JavaScript DOM（Document Object Model）是用于操作HTML和XML文档的编程接口，它允许开发者通过JavaScript来访问、修改和创建网页中的元素，DOM树是由节点构成的层次结构，每个节点代表文档中的一个部分，如元素、属性或文本。
以下是关于DOM树的一些重要概念和操作：
1、节点类型
元素节点（Element Nodes）：表示HTML或XML文档中的元素，如
,
,等。
属性节点（Attribute Nodes）：表示元素的属性，如id,class,href等。
文本节点（Text Nodes）：表示元素内的文本内容。
注释节点（Comment Nodes）：表示注释，如。
文档节点（Document Node）：表示整个文档的根节点。
2、节点关系
父节点（Parent Node）：指向当前节点的直接上级节点。
子节点（Child Nodes）：包含当前节点的所有直接下级节点。
兄弟节点（Sibling Nodes）：拥有相同父节点的其他节点。
3、常用方法
getElementById(id): 根据元素的ID获取对应的元素节点。
getElementsByTagName(tagName): 根据标签名获取所有匹配的元素节点。
getElementsByClassName(className): 根据类名获取所有匹配的元素节点。
querySelector(selector): 根据CSS选择器获取第一个匹配的元素节点。
querySelectorAll(selector): 根据CSS选择器获取所有匹配的元素节点。
createElement(tagName): 创建一个新的元素节点。
createTextNode(text): 创建一个新的文本节点。
appendChild(node): 将一个节点添加到另一个节点的子节点列表末尾。
removeChild(node): 从子节点列表中删除一个节点。
replaceChild(newNode, oldNode): 用新节点替换旧节点。
4、遍历DOM树
parentNode: 返回当前节点的父节点。
childNodes: 返回当前节点的所有子节点。
firstChild: 返回当前节点的第一个子节点。
lastChild: 返回当前节点的最后一个子节点。
nextSibling: 返回当前节点的下一个兄弟节点。
previousSibling: 返回当前节点的前一个兄弟节点。
5、示例代码
// 获取元素节点var element = document.getElementById("myElement");// 创建新的元素节点并添加到DOM树中var newDiv = document.createElement("p");document.body.appendChild(newDiv);// 修改元素的属性element.setAttribute("class", "newClass");// 移除元素element.parentNode.removeChild(element);常见问题与解答
1、问题：如何通过JavaScript动态地添加一个新的元素到页面上？
答案： 可以使用createElement()方法创建一个新的元素节点，然后使用appendChild()方法将其添加到DOM树中的某个位置。
“`javascript
var newElement = document.createElement("p");
newElement.innerHTML = "Hello, World!";
document.body.appendChild(newElement);
“`
2、问题：如何通过JavaScript获取页面上所有的段落元素？
答案： 可以使用getElementsByTagName()方法，传入"p"作为参数，以获取所有的段落元素。
“`javascript
var paragraphs = document.getElementsByTagName("p");
“`
QQ客服