DOM
目录
DOM树结构
- 根节点（Root Node）：在HTML文档中，
<html>元素是整个DOM树的根节点。它包含了文档的所有其他部分。 - 元素节点（Element Node）：这些节点对应了HTML或XML文档中的标签，如
<body>、<p>等。元素节点可以有子节点，包括其他元素节点、文本节点或注释节点等。 - 文本节点（Text Node）：这些节点包含了元素或属性中的文本内容。在HTML文档中，
<p>Hello, world!</p>中的"Hello, world!"就是一个文本节点。 - 属性节点（Attribute Node）：虽然在现代的DOM实现中，属性通常不直接表现为DOM树中的节点（它们是通过元素节点的属性或方法来访问的），但在早期的DOM规范中，属性被视为节点。在更现代的实践中，我们通过元素节点的属性（如
element.getAttribute()或element.setAttribute()）来操作属性。 - 注释节点（Comment Node）：这些节点表示HTML或XML文档中的注释，例如
<!-- 这是一个注释 -->。 - 文档节点（Document Node）：这代表了整个文档，它是DOM树中的顶级节点，虽然它本身不直接显示在树状图中，但它是访问整个DOM树的入口点。
示例：
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
对应的DOM树结构会是这样的：
- Document（文档节点，非直接显示）
- html（元素节点，根节点）
- head（元素节点）
- title（元素节点）
- 文本节点（内容为“示例页面”）
- title（元素节点）
- body（元素节点）
- p（元素节点）
- 文本节点（内容为“这是一个段落。”）
- p（元素节点）
- head（元素节点）
- html（元素节点，根节点）
通过DOM API，我们可以访问、修改或删除这个树中的任何节点，从而动态地改变网页的内容和结构。
获取DOM对象
1.通过ID获取：如果你知道元素的ID，可以使用document.getElementById()方法。这是最直接且常用的方法之一。
var element = document.getElementById("myElementId");
这里，"myElementId"是你要获取的元素的ID。
2.通过类名获取：如果你想要获取具有特定类名的所有元素，可以使用document.getElementsByClassName()方法。注意，这个方法返回的是一个HTMLCollection，即使只有一个匹配的元素也是如此。
var elements = document.getElementsByClassName("myClassName");
// 访问第一个元素
var firstElement = elements[0];
3.通过标签名获取：如果你想要获取文档中所有的特定标签（如<p>、<div>等），可以使用document.getElementsByTagName()方法。同样，这个方法也返回一个HTMLCollection。
var elements = document.getElementsByTagName("p");
// 访问第一个<p>元素
var firstParagraph = elements[0];
- 通过css选择器获取：现代浏览器支持
document.querySelector()和document.querySelectorAll()方法，它们允许你使用CSS选择器来获取DOM元素。querySelector()返回第一个匹配的元素，而querySelectorAll()返回一个NodeList，包含所有匹配的元素。
// 获取第一个匹配的元素
var element = document.querySelector(".myClassName");
// 获取所有匹配的元素
var elements = document.querySelectorAll(".myClassName");
// 访问第一个元素
var firstElement = elements[0];
更新DOM对象
1.修改属性：你可以直接修改DOM元素的属性来更新它。例如，修改元素的className、style、textContent等。
// 修改元素的类名
var element = document.getElementById("myElementId");
element.className = "newClassName";
// 修改元素的样式
element.style.color = "red";
// 修改元素的文本内容
element.textContent = "新的文本内容";
2.替换内容：使用innerHTML属性可以替换元素内部的所有内容，包括子元素和文本。但请注意，这可能会导致性能问题，并且如果内容包含用户输入，还可能引起XSS攻击。
// 替换元素内部的所有内容
element.innerHTML = '<p>新的HTML内容</p>';
插入DOM对象
你可以使用appendChild()、insertBefore()等方法来插入新的子节点，或者使用removeChild()来删除子节点。
// 创建一个新的元素
var newElement = document.createElement("div");
newElement.textContent = "新元素";
// 将新元素添加到现有元素的末尾
element.appendChild(newElement);
// 或者，在指定元素之前插入新元素
var referenceElement = document.getElementById("referenceElementId");
element.insertBefore(newElement, referenceElement);
删除DOM对象
使用removeChild()来删除子节点。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
HTML 文档中
元素包含两个子节点 (两个元素):
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
查找 id="div1" 的元素:
var parent = document.getElementById("div1");
查找 id="p1" 的
元素:
var child = document.getElementById("p1");
从父元素中移除子节点：
parent.removeChild(child);
以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：
var child = document.getElementById("p1");