首页 > 代码库 > DOM基础详解

DOM基础详解

2024-09-05 17:49:58   215人阅读

​认识DOM

    是什么：

        文档对象模型

    为什么：

        W3C推出，为了兼容浏览器，替代DHTML

    

    文档类型：

        GML：通用标记语言

        SGML：标准通用标记语言

        HTML：超文本标记语言，用于显示数据

        XML：可扩展标记语言，用于描述数据


节点

    节点类型：

        基础：

            元素节点1、属性节点2、文本节点3

        注释节点8

        文档：

            文档节点9、文档类型节点10、文档片段节点11

    节点属性：

        nodeType

        nodeName

        nodeValue

    元素节点类型的判断：

        isElement

            判断条件：

                nodeType===1，对象实例于Node，可添加删除节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var testDiv = document.createElement(‘div‘);
var isElement = function (obj) {
    if (obj && obj.nodeType === 1) {
        if (window.Node && (obj instanceof Node)) {
            return true;
        }
        try {
            testDiv.appendChild(obj);
            testDiv.removeChild(obj);
        } catch (e) {
            return false;
        }
    }
    return false;
};


        isHTML

            判断条件：

                nodeName一定是大写

1
2
3
4
var isHtml = function (doc) {
    return doc.createElement(‘p‘).nodeName === doc.createElement(‘P‘).nodeName;
};
console.log(isHtml(document));


        isXML

            判断条件：

                nodeName区分大小写

1
2
3
4
var isXML = function (doc) {
    return doc.createElement(‘p‘).nodeName !== doc.createElement(‘P‘).nodeName;
};
console.log(isXML(document));


        contains

            判断方法:

                现代浏览器 支持contains，兼容方法尝试递归b.parentNode

1
2
3
4
5
6
7
8
9
10
11
12
function fixContains(a, b) {
    try {
        while ((b = b.parentNode)){
            if (b === a) {
                return true;
            }
        }
        return false;
    } catch (e) {
        return false;
    }
}



domReady

    渲染引擎的基本流程：

        解析HMTL、构建DOM树 → 构建渲染树  → 布局渲染树  → 绘制渲染树

    domReady实现策略：

        window.load问题：

            等所有元素加载完执行，例如图片， 不能立即执行

            不支持多个函数

        DOMReady策略：

            1.支持DOMContentLoaded事件就用DOMContentLoaded

            2.不支持，就用Hack兼容，通过IE中的document.documentElement.doScroll(‘left‘) 来判断DOM树是否创建完毕

        

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function myReady(fn) {
    //现代浏览器，对DOMContentLoaded事件标准处理事件绑定方式
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentloaded();
    }
 
    //IE模拟DOMContentLoaded
    function IEContentloaded(fn) {
        var d = window.document;
        var done = false;
        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 () {
            if (d.readyState == ‘complete‘) {
                d.onreadystatechange = null;
                init();
            }
        }
    }
}


技术分享 



DOM基础详解


联系
我们