【面向JS--DOM节点】

DOM: Document Object Model：专门操作网页内容的API

js组成：ECMAScript(核心语法)+DOM+BOM(Browser Object Model)

DOM标准分为:

核心DOM: 本来是希望操作一切结构化文档(HTML XML)
      优: 万能    缺: API繁琐
HTML DOM: 对核心DOM中部分常用API提供的简化版本，专门用于操作HTML的内容
      优: 简洁    缺: 无法实现所有功能，更侧重修改
实际开发中: 优先使用HTML DOM，如果无法实现的功能，用核心DOM补充。

DOM 树：

浏览器为页面中每个内容分别创建节点对象
所有节点都是按上下级包含关系在内存中以树形结构存储

节点: 封装网页中任意一项内容的属性的对象

包括: 
1、根节点：document对象
    当浏览器获得一个网页时，会自动创建document对象
    所有网页内容中的对象，都是document的子节点
    包括: 查找 创建
2、元素节点: 专门封装页面中的一个元素
3、文本节点: 专门封装页面中的一段连续的文本
4、属性节点: 专门封装页面中元素的一个属性
5、注释节点: 专门封装页面中一段注释 

所有节点的父类型都是:Node

节点对象的公共属性: 3个

-	元素节点	属性节点	文本节点	document
nodeName	大写标签名称	属性名称	text	document
nodeType	1	2	3	9
nodeValue	null	属性的值	文本内容	null

。

节点间关系: 2类:（不是API，不用在后面加（）调用，是对象属性，可直接使用）

1、父子关系:

parentNode: 返回父节点
childNodes: 返回所有直接子节点的动态集合 —— 类数组对象
firstChild : 返回第一个子节点
lastChild: 返回最后一个子节点

动态集合:

不返回完整节点对象，仅返回对节点对象的快速扫描结果。
优点: 查询速度快    
缺点: 每次查询都要重新访问DOM树
问题: 如果反复直接和childNodes.length比较，会造成反复查找
解决: 凡是遍历动态集合，都要提前存储集合的length，再和存储的length比较  

//遍历: 
for(var i=0,len=parent.childNodes.length;i<len;i++){
    //......                 
}

2、兄弟关系:

previousSibling: 返回上一个兄弟节点
nextSibling: 返回下一个兄弟节点

上面所讲的六种节点关系所获取节点类型，包括元素节点和文本节点，这就产生了一个问题，如<p> <span></span></p>，我想获取p元素的span元素，使用firstChild 得到的是一个内容为空字符串的文本节点，这明显不符合我们的要求。这就要用到元素树关系

元素树: 仅包含元素节点的树结构

优: 不会受到空字符的干扰
缺: 无法获得文本节点
6个关系: 
  1、父子关系: parentElementNode:返回父元素节点
            children:返回所有子元素节点
            firstElementChild:返回第一个子元素节点
            lastElementChild:返回最后一个子元素节点
  2、兄弟关系: previousElementSibling:返回上一个兄弟元素节点
              nextElementSibling:返回下一个兄弟元素节点