DOM探索之基础详解解析篇

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>
    }

}

}