DOM基础详解

​认识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();             }         }     } }