DOM概述，DOM树，遍历节点-01

2016-09-07pm

1.什么是DOM:

原生js=ECMAScript(核心语法)+DOM(专门操作网页内容的API)+ BOM(专门操作浏览器窗口的API)
DOM: Document Object Model (专门操作网页内容的API)

DOM标准: W3C 规定了操作一切结构化文档的API。
核心DOM: 操作一切结构化文档(包括HTML和XML)的通用API (万能，但繁琐)
HTML DOM: 专门操作HTML文档的简化版API (只对部分常用的API提供了简化, 不是万能)
XML DOM: 专门操作XML文档的API

鄙视题: HTML XHTML DHTML XML的区别？
HTML:专门编写网页内容的语言
XHTML: 更严格的HTML标准
DHTML: 一切实现动态网页效果的技术统称 (DHTML=HTML+CSS+JS)
XML: 可扩展的标记语言
语法同HTML,但标签可自定义
专门用于持久保存或在网络中传输结构化数据

DOM可执行的操作：查找 修改 添加 删除

2. ***DOM Tree:

2.1什么是DOM树: 网页中一切内容在内存中都是以树形结构组织在一起的。

网页加载过程:

当接收到HTML文档时——>创建一个树根节点:document对象
读取HTML内容时——>每读取一项内容就创建一个节点对象,将节点对象挂到document下

网页中的一切内容都是一个节点对象

2.2节点对象:Node

节点对象的三大属性:

nodeType:节点类型:
document: 9
element: 1
attribute: 2
text: 3
何时: 辨别获得的节点类型时

nodeName: 节点名:
document: #document
element: 标签名(全大写)
何时: 辨别元素的具体标签名
attribute: 属性名
text: #text

nodeValue: 节点值:
document: null
element: null
attribute: 属性值
text: 文本内容

2.3节点间关系:

节点树: 包含所有html内容的DOM树

1. 父子关系:
   parentNode: 父节点
   childNodes: 所有直接子节点 (返回一个动态集合-类数组对象)
   firstChild: 第一个子节点
   lastChild: 最后一个子节点

2. 兄弟关系:
   nextSibling: 下一个兄弟
   previousSibling: 前一个兄弟
   何时使用: 已经获得一个节点，要找它周围的相邻的节点。
   问题: 容易受看不见的空文本干扰
   解决: 如果只需要获取元素，而不关心文本，可用元素树

元素树: 仅包含元素节点的树结构,强调: 不包含一切文本节点

1. 父子关系:
   parentElement: 父元素
   children: 所有直接子元素 (返回一个动态集合-类数组对象)
   firstElementChild: 第一个子元素
   lastElementChild: 最后一个子节点

2. 兄弟关系:
   nextElementSibling: 下一个兄弟
   previousElementSibling: 前一个兄弟
   问题: 浏览器兼容性: IE9+

3.遍历节点:

2步:

1. 先定义函数仅遍历直接子节点
2. 对每个直接子节点应用和父节点相同的操作
   算法: 深度优先遍历

childNodes和children:
live collection(动态集合):
不实际存储节点的完整属性
问题:每次访问集合时，都会重新查找DOM树
遍历:
for(var i=0;i 造成反复查找DOM树
解决:
for(var i=0,len=childNodes.length;i

问题:递归的效率低
解决:用遍历API+循环
遍历API:

1. 节点迭代器:
   按照深度优先的原则，逐个返回每个子节点。
   何时: 只要按照深度优先的顺序，遍历所有子代节点时。
   如何:2步:
   1.用指定父元素创建节点迭代器对象:
   var iterator=
   document.createNodeIterator(
   parent,NodeFilter.SHOW_ALL,
   .SHOW_ELEMENT
   null,false
   );
   2.反复调用iterator的nextNode方法
   返回正在遍历的当前节点对象
   直到返回null为止

2.TreeWalker:
比节点迭代器更灵活的API:
基本用法和NodeIterator一样
只不过扩展了:
walker.parentNode()
walker.firstChild();
walker.lastChild();
walker.nextSibling();
walker.previousSibling();
如何: 2步:同NodeIterator