DOM基础详解

时间：2017-02-23 17:29:33 阅读：220 评论：0 收藏：0 [点我收藏+]

标签：doc 节点解析 table 文档 .com visible 技术分享 overflow

认识DOM

是什么：

文档对象模型

为什么：

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

文档类型：

GML：通用标记语言

SGML：标准通用标记语言

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

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

节点

节点类型：

基础：

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

注释节点8

文档：

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

节点属性：

nodeType

nodeName

nodeValue

元素节点类型的判断：

isElement

判断条件：

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

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

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树是否创建完毕

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基础详解

标签：doc 节点解析 table 文档 .com visible 技术分享 overflow

原文地址：http://www.cnblogs.com/ybbqg/p/6434345.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行