1
html上的所有元素都要解析成DOM节点之后才能操作
DOMReady
节点探究（节点类型）
节点创建与删除
节点查找与筛选
表单与表格操作
属性系统
样式设置
滑动门特效
认识DOM
文档与节点类型
DOMReady
元素节点类型的判断
元素节点的继承层次
元素节点的分类window.onload {
1、等待页面加载完毕(页面所有的元素加载完毕)、要请求的资源}
认识DOM{
1、认识DOM
2、文档类型{
通用标记语言(GML 1969) --> 标准通用标记语言(SGML 1985) -->超文本标记语言(HTML 1993 W3C 万维网联盟)-->可扩展标记语言(XML 1998) 存放格式化数据的
}
3、节点类型{
文档碎片节点：
DocumentFragment节点使用示例，DocumentFragment文本片段节点可以作为一个占位符，来保存其他需要一次性插入文档的节点，
当将其插入到某个节点内时，只是插入其所有子孙节点，其本身不会被插入！
}
4、nodeType、nodeName、nodeValue}
DOM Ready{
浏览器渲染引擎的基本渲染流程：
解析HTML构建DOM树(构建DOM节点) -- > 构建渲染树(解析样式信息)--> 布局渲染树(布局DOM节点) --> 绘制渲染树(绘制DOM节点)window.onload事件
待浏览器绘制完dom节点,浏览器加载完全部资源以后，才执行相应代码。在文档解析渲染，资源加载完成之前，事件不执行。
实现策略:
在页面dom树创建完成后，（也就是HTML解析第一步完成）即触发，而无需等待其他资源的加载。即DOMReady实现策略：
1、支持DOMContentLoaded事件的，就使用DOMContentLoaded事件
2、不支持的，就用来自Diego Perini发现的著名Hack兼容。兼容原理大概就是，通过IE中的document.documentElement.doScroll('left')来判断DOM树
是否创建完毕
各主流框架DOMReady的实现：http://www.cnblogs.com/JulyZhang/archive/2011/02/12/1952484.html}
为什么要判断元素节点的类型{
isElement：是否是元素节点
isHTML：是否是HTML文档的元素节点
isXML：是否是XML文档的元素节点
contains：用来判定两个节点是否是包含关系}
如何判断节点是元素节点{
元素节点类型判断：
isElement;http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object/27112297#27112297}
如何判断节点是html和xml元素节点{
}
如何判断节点的包含关系contains{
}
DOM节点继承层次{
}
HTML嵌套规则{
块状元素与内联元素嵌套规则：{
1、块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
<div><h1></h1><p></p></div>
<a href="#"><span></span></a>
2、块级元素不能放在<p>里面
<p><ol><li></li></ol></p> 错误
<p><div></div></p> 错误
3、有几个特殊的块级元素只能包含内联元素，不能再包含块级元素，这几个特殊的标签是：
h1 h2 h3 h4 h5 h6 p dt
4、li内可以包含div标签
<li><div></div></li>
5、块级元素与块级元素并列，内联元素与内联元素并列
<div><h2></h2><p></p></div>
<div><a href="#"></a><span></span></div>
}
某些特殊元素嵌套规则{
有序列表与无序列表系列{
<ol><li></li></ol>
<ul><li></li></ul>
}
定义列表系列{
<dl>
<dt>Today</dt>
<dd>Today is yesterday.</dd>
<dt>Tomorrow</dt>
<dd>Tomorrow is today.</dd>
</dl>
}
}}