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 标签、属性、文本都对应 DOM 树上的一个节点。
立即学习“前端免费学习笔记（深入）”；
举个例子，假设你有以下 HTML 代码：
我的网页 欢迎来到我的网页
这是一个段落。
那么对应的 DOM 树大概是这样的（简化版）：
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
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)
: 移除元素的子节点。
一个简单的例子：
DOM 操作示例 原始标题
在这个例子中，点击按钮会调用
changeHeading()函数，这个函数会找到 ID 为 "myHeading" 的
元素，然后将其文本内容修改为 "新标题!"。
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 的开销。
