jsDOM

js Dom
DOM本质:

DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；
有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。

Dom节点的Attribute和Property有和区别？

Attribute:修改html的属性，会改变html结构。
Property:修改对象属性，不会体现到html中。

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性能:

比如上面那个例子，就可以先建立一个文档片段，然后把你for循环想要插入文档中的统一插出文档片段中，最后在插入文档树，就是dom中，这样比一次一次插入性能要好很多。