DOM

1.什么是DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。DOM是表示和处理HTML和XML文档的常用方法。
　　DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
　　通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
DOM 将 HTML 文档表达为树结构

2.DOM树

节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

image.png

3.查找获取节点

通过使用 getElementById() 和 getElementsByTagName() 方法（获取的是动态的）
或通过使用querySelector() (单个) 和querySelectorAll()(数组)通过css的方式来获得(获取的是静态数组)
查找获取节点有四种方式：
1、id名
2、标签名
3、name属性
4、class名

4、节点类型

childNodes  所有子节点(数组)=换行+注释+所有子标签
children 所有是标签类型的子节点
parentNode  父节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
firstChild 第一个子节点
lastChild 最后一个子节点

5、常见的节点操作

（1）创建节点

document.createElement(eName) //创建一个节点
document.createAttribute(attrName); //对某个节点创建属性
document.createTextNode(text);　　　//创建文本节点

（2）添加节点

document.insertBefore(newNode,referenceNode);　 //在某个节点前插入节点
parentNode.appendChild(newNode);　　　　　　　　//给某个节点添加子节点

（3）复制节点

cloneNode(true | false);　　//复制某个节点  参数：是否复制原节点的所有属性

（4）删除节点

parentNode.removeChild(node);　　//删除某个节点的子节点 node是要删除的节点

（5）节点的处理方法总结

处理节点方法.png

6、DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

HTML 事件的例子：
·当用户点击鼠标时
·当网页已加载时
·当图片已加载时
·当鼠标移动到元素上时
·当输入字段被改变时
·当 HTML 表单被提交时
·当用户触发按键时

DOM常见事件

DOM事件.png