DOM是啥
文档对象模型 （document-object-module）
HTMLL文档的标签（对象）变成了一颗棵树
- DOM是干啥的
描绘了一个层次化的节点树 => DOM树
为开发人员提供API（应用程序编程接口）
提供方法：增删改查
选取文档元素 - DOM的节点层次
DOM可以将任何HTML文档描绘成一个多层节点构成的结构
节点分为多种类型，每种类型分别表示文档中不同的信息及标记，每个节点都拥有各自的特点、数据和方法 - 文档节点
document = 文档节点
只有一个子节点
html元素 = 根元素/文档元素
文档元素是文档最外层元素
什么是DOM事件
- 事件定义
事件就是文档或窗口中发生一些特定的交互瞬间 - 事件流：从页面中接收事件的顺序
1、事件冒泡
IE的事件流叫做事件冒泡
事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
（由深至浅）
所有现代浏览器都支持事件冒泡一直会冒泡到window对象上
2、事件捕获
Netscape?Communicator团队提出的另一种事件流叫做事件捕获
由不太具体的节点更早地接收到事件，由最具体的节点应该最后接收到事件 - DOM事件流的阶段
事件捕获阶段
处于目标阶段
事件冒泡阶段
注意：
在DOM事件流中，实际的目标在捕获阶段不会接收到事件，这就意味着在捕
获阶段，事件从document到<html>再到<body>后就停止了
在下一个阶段是处于目标阶段，于是事件在<div>上发生，并在事件处理中被
看做了冒泡阶段的一部分，然后冒泡阶段发生，事件又传播回文档
but
高版本浏览器都会在捕获阶段触发事件对象上的事件，结果，就有两个
机会在目标对象上面操作事件
节点的属性
- nodeName: 元素的标签名，切记是大写形式
- nodeValue: text节点或comment节点的内容
- nodeType: 节点的类型
每个节点有节点类型 - nodeType
总共有12种节点类型，由1-12数值代表
元素节点 = 1 => Node.ELEMENT_NODE(1)
属性节点 = 2 => Node.ATTRIBUTE_NODE(2)
文本节点 = 3 => Node.TEXT_NODE(3) #text
注释节点 = 8 => Node.COMMENT_NODE(8) #comment
文档节点 = 9 => Node.DOCUMENT_NODE(9)
节点关系 - parentNode: 该节点的父节点
- Document对象的父节点是null，木有父节点
- childNodes
只读的类数组对象(NodeList)对象，它是该节点的子节点的实时表示(动态查
询的结果) - children
由于IE9之前的版本与其他浏览器在处理文本节点中的空白符有差异，因此出
现了children属性
这个属性是HTMLCollection的实例，只包含元素中元素的子节点 - firstChild/lastChild
该节点的子节点找那个的第一个和最后一个，如果该节点没有子节点则为null - nextSibling/previoursSibling
该节点的兄弟节点中的前一个和下一个，具有相同父节点的两个为兄弟节点
特殊情况
对于元素之间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器都会
返回文本节点
这就导致了在使用childNodes和firstChild等属性的行为不一致
为了弥补该差异性，Element Traversal规范新定义了一组属性 - childElementCount: 返回子元素（不包括文本节点和注释）的个数
- firstElementChild: 指向第一个子元素，firstChild的元素版
- lastElementChild: 指向最后一个子元素，lastChild的元素版
- previousElementSibling: 指向前一个同辈元素； previousSibling的元素
版 - nextElementSibling: 指向后一个同辈元素，nextSibling的元素版
选取文档元素
-
通过ID选取元素
唯一性
找不到返回null
找到了返回该元素
var ele = document.getElementById('id名'); -
通过类名选取元素(H5)
返回的匹配类名的元素
找不到返回空数组
var eles = document.getElementsByClassName('类名'); -
通过名字选取元素
var eles = document.getElementsByName('name'); -
通过标签名选取元素
var eles = document.getElementsByTagName('标签名'); -
通过CSS选择器选取元素
var ele = document.querySelector(选择器); // div>p
返回与该模式匹配的第一个元素，如果没有则返回null
var eles = document.querySelectorAll(选择器) // div>p, div>span
返回NodeList，类似一组元素的快照, 而非不断对文档进行搜索的动态查询
网友评论