1. DOM概述：
DHTML：动态HTML技术——凡是能够实现动态效果的技术
DHTML=HTML+CSS+JS
鄙视题：
HTML XHTML DHTML XML
HTML：超文本标记语言，专门编写网页内容的语言
XHTML：严格的HTML标准
DHTML：动态HTML技术，是HTML+CSS+JS的统称
XML：可扩展的标记语言，标签名和属性名可自定义！
<student>
<name id="fbb">范冰冰</name>
<math>91</math>
<chs>65</chs>
<eng>95</eng>
</student>
XML基本被JSON代替
JSON：JavaScript Object Notation
‘{"name":范冰冰,"math":91,"chs":65,"eng":95}‘
BOM和DOM：
window对象：2个角色：
1. 代替了ES标准中Global，充当全局对象
2. 封装当前浏览器窗口的功能和属性——BOM
BOM：Browser Object Model——专门操作浏览器窗口的API
包括：浏览器窗口的属性和功能
缺点：没标准——兼容性差
DOM：Document Object Model——专门操作网页内容的API
包括：.html网页中编写的一切内容和属性
优点：有国际标准，所有浏览器几乎100%兼容
Document其实不仅指网页，而是指一切自描述的结构化文档
DOM API：2大类：
1. 核心DOM：通用API，即可以操作HTML文档，也可以操作XML文档。
优点：可以对文档内容做任何操作！
缺点：API操作繁琐
2. HTML DOM：DOM Level2，提供了专门操作网页内容的简化版API。但仅对复杂HTML元素进行了简化。
优点：API简单
缺点：不能完成所有操作，都需要核心DOM补充
开发：优先使用HTML DOM，再用核心DOM API补充
2. ***DOM Tree
网页的加载过程：
Browser Server
1. 浏览器send request： --> 查找请求的.html页面
2. 创建Document对象 <--.html<--返回response
3. 读取HTML内容在Document对象下搭建DOM Tree
JQuery
4. 请求外部css文件: --> 查找请求的.css文件
<--.css <-- 返回response
5. 将样式设置到DOM Tree
的节点对象上
*同时，计算对象间的大小和位置：layout(reflow)*
生成Render Tree——加载完样式后的树
6. 浏览器绘制界面
window.onload
根节点：document对象
Node类型：所有节点对象的父类型
三大通用属性：
1. nodeType：当前节点的类型——返回的是数字
DOCUMENT_NODE : 9
ELEMENT_NODE : 1
ATTRIBUTE_NODE : 2
TEXT_NODE : 3
何时使用：判断获得的节点的类型时
2. nodeName：节点名称
document : “#document”
ELEMENT : "全大写标签名"
ATTRIBUTE : "属性名"
TEXT : "#text"
何时使用：判断获得的元素节点的标签名时
if(obj.nodeName=="INPUT")
3. nodeValue : 节点值——对元素节点无效
ATTRIBUTE : "属性值"
TEXT : “文本内容”
DOM Tree 节点间关系：2组：
1. 父子关系：parentNode childNodes firstChild lastChild
2. 兄弟关系：previousSibling nextSibling
**问题1：除了parentNode外，其余都会受到看不见的空字符的影响。空字符也是文本节点！
**问题2：childNodes：返回NodeList类型的类数组对象
包含了父节点下的所有直接子节点对象
***动态集合***：仅包含节点对象的引用，不包含实际属性值！每次访问结合的属性时，都要重新查询DOM树
遍历childNodes：
效率低：for(var i=0;i<obj.childNodes.length;i++)
后果：每循环一次，都要重新查询length的个数
解决：for循环的第一部分缓存length的值
for(var i=0,len=obj.childNodes.length;i<len;i++)
原文：http://11108086.blog.51cto.com/11098086/1733449