文档对象模型（DOM）的一些总结

DOM总结

1.定义
DOM是文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或XML）标准的编辑接口，W3C已经定义了一系列的DOM接口，都过这些DOM接口可以改变页面的内容、结构和样式

2.操作元素
对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。
对于HTML,DOM使HTML形成一颗DOM树，包含文档、元素、节点。
注：获取的DOM元素是一个对象(object),所以称之为文档对象模型。
关于DOM操作，主要是针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作。
3.元素创建
（1） document.write
document.write() 直接将内容写入页面的内容流，但是当文档执行完毕，则他会导致全部页面重绘
（2） element.innerHTML
innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。
innerHTML创建多个元素效率会更高（不要拼接字符串，采取数组的形式拼接），结构稍微复杂。
（3） document.createElement
document.createElement()创建多个元素效率会稍微低一点，但是结构更清晰。
不同浏览器下，innerHTML效率比createElement高一些
4. 增加元素
（1） appendChild() 在元素最后插入
（2） insertBrfore() 在最前面插入
5. 删除元素
removeChild()
6.改
主要修改DOM元素的属性，DOM元素的内容、属性、表单的值等。
（1） 修改元素属性：str、href、title等
（2） 修改普通元素内容:innerHTML、innerText
(3) 修改表单元素：value、type、disabled
(4) 修改元素样式：style、className
7.查
主要查询DOM的元素
1.DOM提供的API方法：getElementById、getElementsByTagName
2.H5提供的新方法：querySelector、querySelectorAll
3.利用节点元素获取元素：父(parentNode)、子（children）、兄（previousElementSibling、nextElementSibling）
8.属性操作
主要针对于自定义属性
（1）setAttribute:设置DOM的属性值
（2）getAttribute:得到DOM的属性值
（3）removeAttribute:移除属性
9. 事件操作
给元素注册事件，采取事件源形式
事件类型=事件处理程序