DOM（Document Object Modal）是网页结构的基础，学会DOM操作才可以做网页开发。本片将包含DOM结构、常用DOM操作、DOM性能优化等方面面试题和解答。
一、DOM是哪种数据结构
DOM是一种树形数据结构，用于表示HTML或XML文档中的元素、属性和文本。在DOM中，每个HTML或XML标记都被表示为一个节点，节点之间通过父子关系链接起来。形成一棵树。树的根节点是整个文档，而叶子节点则是文档中的最小元素，如文本或属性。通过DOM，开发人员可以使用JavaScript语言来访问和操作文档中的元素，从而实现动态网页和Web应用程序。
二、DOM操作的常用API
DOM操作时通过javascript来操作这个树形结构。下面是DOM操作的常用API：
getElementById():通过元素的id获取元素对象
getElementByTagName():通过元素的标签名获取元素对象合集
getElementByClassName():通过元素的class属性获取元素对象合集
querySelector():通过CSS选择器获取元素对象
querySelectorAll():通过CSS选择器获取元素对象合集
createElement():创建一个新的元素节点
createTextNode():创建一个文本节点
appendChild():将一个节点添加到另一个节点的子节点列表的末尾
removeChild():从父节点中删除一个子节点
parentNode():获取一个节点的父节点
childNodes:获取一个节点的所有子节点
firstChild:获取一个节点的第一个子节点
lastChild:获取一个节点的最后一个子节点
nextSibling:获取一个节点的下一个兄弟节点
previousSibling:获取一个节点的上一个兄弟节点
innerHTML:获取或设置一个元素的HTML内容
style:获取或设置一个元素的CSS样式
addEventListener():为一个元素添加事件监听器
removeEventListener():移除一个元素的事件监听器
scrollHeight:获取一个元素的滚动高度
三、attr和property的区别
在DOM中，属性（attribute）和属性节点（property node）是两个不同的概念，它们有以下区别：
1、属性（attribute）是HTML标签中的特性，如class、id、href等，而树形节点（property node）则是DOM对象的属性，如innerHTML、style、value等。
2、在JavaScript中,可以通过对象的属性（property）来访问和修改属性节点（property node），但不能直接访问和修改属性（attribute）。
3、在DOM中，属性（attribute）和属性节点（property node）有时候是同步的，例如对于input元素的value属性和value属性节点，它们通常是同步的。例如当用户输入框中输入文本时，value属性和value属性节点的值都会随之改变，但是，有些属性和属性节点是不同步的，例如style，因为style属性节点包含了元素的所有样式信息，而style属性只包含了内联样式信息。
四、一次性插入多个DOM节点，考虑性能问题
在一次性插入大量DOM节点时，考虑到性能问题。可以采用以下几种方法：
1、使用DocumentFragment:将所有要插入的节点添加到DocumentFragment中，然后将DocumentFragment一次性插入到DOM中。这样可以减少DOM操作次数。
2、使用innerHTML:将要插入的节点以字符串形式拼接成HTML代码，然后通过innerHTML属性一次性插入到DOM中。这种比使用DOM操作性能更高，但需要注意防止XSS攻击。
3、使用requestAnimationFrame：将要插入的节点分批插入，每次插入一小部分，然后使用requestAnimationFrame方法在下一帧继续插入下一批节点。这样可以避免一次性插入大量节点导致的阻塞UI线程。
4、使用虚拟DOM:虚拟DOM时一种将DOM结构抽象成JavaScript对象的技术，可以在内存中操作虚拟DOM，然后通过Diff算法计算出最小化的DOM操作，再将操作应用到真实的DOM中。这样可以减少操作次数。
5、使用Web Worker：将要插入的节点的创建和插入操作放在Web Worker中执行，这样可以将操作放在独立的线程中，避免阻塞主线程。
