DOM重点核心总结

文档对象模型( Document Object Model ,简称DOM),是W3C组织推荐的处理可扩展标记语言( HTML或者XML )的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
1.对于JavaScript ,为了能够使JavaScript操作HTML , JavaScript就有了一自己的dom编程接口。
2.对于HTML , dom使得html形成-棵dom树. 包含文档、元素、节点

在一个网页中，页面就是文档，标签就是根元素，内容就是节点。
我们获取过来的DOM元素是一个对象( object) , 所以称为文档对象模型

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

*1、创建

1. document.write
2. innerHTML
3. createElement
   区别（重点）
   1、 document .write是直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘。
   2、 innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
   3、 innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接) , 结构稍微复杂。
   4、 createElement()创建多个元素效率稍低一点,但是结构更清晰
   总结:不同浏览器下, innerHTML效率要比creatElement 高

2、增

1、appendChild（） 用法：父节点对象.appendChild(子节点对象)，在后面增加
2、insertBefore（） 用法：父节点对象.insertBefore(新节点，已经存在的节点) ，在前面添加

3、删

1、removeChild（），用法：父节点.removeChild(要删除的子节点)
2、remove ( )， 用法：元素节点.remove()

## 4、改
主要修改dom的元素属性, dom元素的内容、属性,表单的值等
1.修改元素属性：src、href、 title等
2.修改普通元素内容: innerHTML、innerText
3. 修改表单元素: value、 type、 disabled等
4.修改元素样式: style、 className

5、查

主要获取查询dom的元素
1、 DOM提供的API方法： getElementByld，getElementsByTagName 古老用法不太推荐
2. H5提供的新方法 ：querySelector、querySelectorAll 提倡
3.利用节点操作获取元素：父(parentNode获取的是该元素的直接父节点，parentElement获取的是该元素的直接父元素节点)、子(children 注意：这里获取的是一个子节点的集合，可以通过下标值进行节点访问)、 兄(previousElementSibling、nextElementSibling)提倡

6、属性操作

主要针对于自定义属性。

1. setAttribute ：设置dom的属性值，用法：dom对象.setAttribute(“属性名”,“属性值”)
2. getAttribute ：得到dom的属性值，用法：dom对象.getAttribute(“属性名”)
3. removeAttribute移除属性 ，用法：dom对象.removeAttribute(“属性名”)

7、事件操作

给元素注册事件，采取 事件源.事件类型=事件处理程序