1. 什么是DOM: Document Object Model
专门操作网页内容的API
js=ES+DOM+BOM
DOM是由W3C指定的API标准
为什么: 为了统一各个浏览器操作网页内容的API标准
用DOM标准操作网页内容，几乎100%兼容
能做什么: 增删改查，事件绑定
2. DOM Tree:
什么是: 内存中保存所有网页内容的树型结构
为什么: 树型结构是最灵活，最直观保存层级关系的结构
何时: 当浏览器读到一个网页文件时，会从上到下顺序读取文件中的内容（元素，属性，文本）
并在内存中，构建树结构，保存网页中所有内容
DOM只有唯一的一个根节点: document 指代整个网页
网页中所有内容都是DOM树上的节点对象
节点对象的公共父类型: Node
三个公共属性:
.nodeType: 节点类型:
值是一个数字:
1 element
2 attribute
3 text
9 document
何时: 区分节点的类型时
问题: 无法进一步区分元素的名称
.nodeName: 节点名
值是一个字符串
element 全大写标签名
attribute 属性名
text #text
document #document
何时: 只要精确区分元素的名称时
.nodeValue: 节点值
几乎不用:
element null
attribute 属性值
text 文本内容
document null
3. 查找: 4种:
1. 不需要查找就可直接获得的元素: 4种:
document.documentElement html
document.head head
document.body body
document.forms[i/id] form
2. 按节点间关系查找:
节点树: 包含所有网页内容的树结果
2大类:
1. 父子关系: 4个
.parentNode 父节点 返回一个节点
.childNodes 直接子节点 返回多个节点的类数组对象
.firstChild 第一个直接子节点
.lastChild 最后一个直接子节点
2. 兄弟关系:
.previousSibling 前一个兄弟
.nextSibling 后一个兄弟
问题: 受看不见的空字符的干扰
解决: 元素树:
元素树: 仅包含元素节点的树结构
2大类:
1. 父子关系: 4个
.parentElement 父元素
.children 直接子元素
.firstElementChild 第一个直接子元素
.lastElementChild 最后一个直接子元素
2. 兄弟关系:
.previousElementSibling 前一个兄弟元素
.nextElementSibling 后一个兄弟元素
说明: 元素树不是一棵新树，只是节点树的子集
元素树有兼容性问题
问题: 只能在先获得一个节点对象的情况下，找周围附近的节点
解决: 用HTML特征查找
3. 按HTML特征查找: 4种:
1. 按id查找1个元素
var elem=document.getElementById(id);
强调: ById只能用document调用
2. 按标签名查找多个元素:
var elems=parent.getElementsByTagName(标签名)
强调:可用任意父元素调用
不仅查找直接子元素，且在所有后代中查找
3. 按name属性查找多个元素:
var elems=document.getElementsByName(name)
强调: 只能用document调用
4. 按class查找多个元素:
var elems=parent.getElementsByClassName(class)
强调: 可在任意父元素上调用
只要一个class与之匹配，就选择该元素
动态集合(live collection):
什么是: 不实际存储数据，每次访问集合，都重新查找DOM树。
为什么: 首次查找不必准备完整数据，就可快速返回
缺点: 如果反复访问集合，会导致反复查找DOM树
何时: childNodes, children, getElementsByXX()都返回动态集合
不好的遍历: for(var i=0;i<children.length;i++)
好的遍历: for(var i=0,len=children.length;i<len;i++)