DOM Ready

认识 DOM

1. 认识DOM
   DOM，全程 Document Object Model，也就是我们常说的文档对象模型。DOM 将HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。DOM 的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。

2. DOM 节点
   节点至少拥有 nodeType、nodeName 和 nodeValue 这三个基本属性。nodeType 属性返回节点类型的常数值，nodeName 属性返回节点的名称，nodeValue 属性返回或设置当前节点的值，格式为字符串。

   
   

DOM Ready 概述

window.onload 事件是在页面所有的资源都加载完毕后触发的，如果页面上有大量图片等资源响应缓慢，会导致 window.onload 事件迟迟无法触发，所以出现了 DOM Ready 事件。此事件在 DOM 文档结构准备完毕后触发，即在资源加载前触发。

DOM Ready 实现策略

在页面的 DOM 树创建完成后（也就是 HTML 解析第一步完成）即触发，而无需等待其他资源的加载。

1. 支持 DOMContentLoaded 事件的，就使用DOMContentLoaded 事件。
2. 不支持的，就用 document.documentElement.doScroll("left") 来判断 DOM 树是否创建完毕。doScroll 必须在 DOM 主文档准备完毕时才可以正常触发，所以通过 doScroll 判断 DOM 是否准备完毕。也是 jQuery 的实现原理。

DOM Ready 实现

function myReady(fn){
    // 对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
    if ( document.addEventListener ) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }

    // IE模拟DOMContentLoaded
    function IEContentLoaded (fn) {
        var d = window.document;
        var done = false;

        // 只执行一次用户的回调函数init()
        var init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };

        (function () {
            try {
                // DOM树未创建完之前调用doScroll会抛出错误
                d.documentElement.doScroll('left');
            } catch (e) {
                // 延迟再试一次~
                setTimeout(arguments.callee, 50);
                return;
            }
            // 没有错误就表示DOM树创建完毕，然后立马执行用户回调
            init();
        })();

        // 监听document的加载状态
        d.onreadystatechange = function() {
            // 如果用户是在domReady之后绑定的函数，就立马执行
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        }
    }
}

继承层次与嵌套规则

1. DOM节点继承层次

   
   

2. HTML嵌套规则
   HTML 存在许多种类型的标签，有的标签下面只允许特定的标签存在，这就叫 HTML 嵌套规则。

   
   块状元素与内联元素

3. 块状元素与内联元素嵌套规则

   • 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其他的内联元素。
   • 块级元素不能放在 <p> 标签内。
   • 有几个特殊的块级元素（h1~h6、p、dt）只能包含内联元素，不能再包含块级元素。
   • li 内可以包含 div 标签。
   • 块级元素与块级元素并列，内联元素与内联元素并列。

热点链接系列