DOM
JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点
整个文档是一个文档节点
每个标签是一个元素节点
包含在元素中的文本是文本节点
元素上的属性是属性节点
文档中的注释是注释节点
DOM本质 DOM树：
DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；
有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。
下图为html文档：
DOM树形如一颗倒长的树。
它很容易表明家族成员之间的关系，把复杂的关系简明地表示出来
DOM 节点操作
- 新增节点
- 查询子节点
- 查询父节点
- 删除节点
1. 创建新节点 （document调用）
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2. 添加、移除、替换、插入 （父元素调用）
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3. 查找 （document调用）
getElementsByTagName() //通过标签名称 一组元素
getElementsByName() //通过元素的Name属性的值 一组元素
getElementById() //通过元素Id，唯一性单个元素
getElementByClassName()//通过c元素lass获取 一组元素
qurySelectorAll('选择器') // 通过选择器获取一组元素
querySelector("选择器") // 通过选择器获取单个元素
4. 关系 （元素调用前三个父元素调用 ）
childNodes // 获取所有的子节点
children // 获取所有的子元素节点 (常用)
firstElementChild 获取第一个元素
lastElementChild 获取最后一个元素
parentNode 获取当前节点的父节点
previousElementSibling 获取当前节点的前一个兄弟元素
nextElementSibling 获取当前节点的后一个兄弟元素
Dom节点的Attribute和Property有和区别？
DOM性能
如何提高Dom性能，优化页面？
DOM相关面试题
问题1、dom是哪种基本的数据结构？
树结构
问题2、Dom操作的常用API有哪些？
①获取DOM节点，以及节点的property和Attribute
②获取父节点，获取子节点 childNodes/ parentNode
③新增节点，删除节点
问题3、Dom节点的Attribute和Property有和区别？
①property只是一个JS对象的属性的修改
②Attribute是对html标签属性的修改
问题4、DOM性能优化。
将频繁的操作改为一次性操作，通过创建文档碎片，最后一次性加入文档碎片。