dom树是html文档的层级结构表示，其中html标签为根节点，head、body为子节点，其下元素逐级展开形成树状结构；1.通过javascript操作dom可访问和修改节点，常用方法包括document.getelementbyid、getelementsbyclassname、getelementsbytagname、queryselector和queryselectorall来查找元素；2.修改元素内容可用innerhtml或textcontent，设置属性用setattribute，修改样式用style.propertyname；3.创建元素使用createelement和createtextnode，添加用appendchild或insertbefore，删除用removechild；4.为提升性能应减少直接dom操作，可通过批量更新、使用documentfragment和缓存节点优化；5.虚拟dom是前端框架为解决性能问题引入的技术，通过在内存中比较新旧虚拟dom差异，仅将变化部分更新到真实dom，从而减少重渲染开销，提高页面性能。
HTML DOM 就像一个树状图，它把 HTML 文档的每个元素都看作一个对象，你可以通过 JavaScript 来访问和修改这些对象，从而动态地改变网页的内容和结构。
HTML DOM（文档对象模型）是 HTML 文档的标准对象表示，它定义了访问和操作 HTML 文档的标准方法。
什么是 DOM 树？
DOM 树是 HTML 文档的层级结构表示。想象一下，你的 HTML 代码就像一棵树，
<html>标签是树根，
<body>、
<head>是树干，而段落
<p>、标题
<h1>、链接
<a>等元素就是树枝和树叶。每个 HTML 标签、属性、文本都对应 DOM 树上的一个节点。
立即学习“前端免费学习笔记（深入）”；
举个例子，假设你有以下 HTML 代码：
<!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是一个段落。</p> </body> </html>
那么对应的 DOM 树大概是这样的（简化版）：
html
head
title
"我的网页"
body
h1
"欢迎来到我的网页"
p
"这是一个段落。"
如何通过 JavaScript 操作 DOM？
JavaScript 提供了很多方法来访问和修改 DOM 树上的节点。最常用的方法包括：
-
查找元素:
document.getElementById(id)
: 通过元素的 ID 查找。这是最快也最常用的方法。document.getElementsByClassName(className)
: 通过元素的 class 名称查找。返回一个 HTMLCollection，需要通过索引访问。document.getElementsByTagName(tagName)
: 通过元素的标签名查找。同样返回一个 HTMLCollection。document.querySelector(selector)
: 使用 CSS 选择器查找第一个匹配的元素。document.querySelectorAll(selector)
: 使用 CSS 选择器查找所有匹配的元素。返回一个 NodeList。
-
修改元素:
element.innerHTML
: 修改元素的 HTML 内容。小心使用，可能会导致 XSS 攻击。element.textContent
: 修改元素的文本内容。更安全，推荐使用。element.setAttribute(attributeName, attributeValue)
: 设置元素的属性。element.removeAttribute(attributeName)
: 移除元素的属性。element.style.propertyName
: 修改元素的 CSS 样式。
-
创建和添加元素:
document.createElement(tagName)
: 创建一个新的 HTML 元素。document.createTextNode(text)
: 创建一个新的文本节点。element.appendChild(newNode)
: 将一个新的节点添加到元素的子节点列表的末尾。element.insertBefore(newNode, referenceNode)
: 将一个新的节点添加到元素的子节点列表中的指定位置。element.removeChild(childNode)
: 移除元素的子节点。
一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>DOM 操作示例</title>
</head>
<body>
<h1 id="myHeading">原始标题</h1>
<button onclick="changeHeading()">修改标题</button>
<script>
function changeHeading() {
let heading = document.getElementById("myHeading");
heading.textContent = "新标题!";
}
</script>
</body>
</html>在这个例子中，点击按钮会调用
changeHeading()函数，这个函数会找到 ID 为 "myHeading" 的
<h1>元素，然后将其文本内容修改为 "新标题!"。
DOM 操作的性能问题
频繁的 DOM 操作会影响网页的性能，因为每次修改 DOM 都会导致浏览器重新渲染页面。为了优化性能，应该尽量减少 DOM 操作的次数。
一些建议：
- 批量更新: 如果需要修改多个元素，可以先将这些修改收集起来，然后一次性应用到 DOM 上。
- 使用 DocumentFragment: DocumentFragment 是一个轻量级的文档片段，可以在内存中构建 DOM 结构，然后一次性添加到 DOM 树中。
- 缓存 DOM 节点: 如果需要多次访问同一个 DOM 节点，可以将其缓存起来，避免每次都重新查找。
为什么需要虚拟 DOM？
虚拟 DOM 是 React 等前端框架为了解决 DOM 操作性能问题而引入的一种技术。它本质上是一个 JavaScript 对象，用来描述真实的 DOM 结构。当组件的状态发生变化时，React 会先在虚拟 DOM 上进行修改，然后将修改后的虚拟 DOM 与之前的虚拟 DOM 进行比较，找出需要更新的部分，最后只更新真实 DOM 中对应的部分。
虚拟 DOM 的好处在于，它可以减少不必要的 DOM 操作，从而提高网页的性能。它相当于在真实 DOM 和 JavaScript 代码之间增加了一个缓冲层，避免了频繁的直接操作 DOM。虽然引入虚拟 DOM 会增加一些额外的计算开销，但通常来说，这些开销远小于直接操作 DOM 的开销。
