DOM基础+domReady+元素节点类型判断

DOM节点类型  nodeType

element  1    Node.ELEMENT_NODE   元素节点

attr  2   Node.ATTRIBUTE_NODE  属性节点

text  3    Node.TEXT_NODE   文本节点(标签之间的空白区域也属于文本节点）

comment   8     Node.COMMENT_NODE   注释节点

document   9     Node.DOCUMENT_NODE   文档节点（所有文档之上，即一个页面中最最前面的位置，在文档定义的前面）

documentType   10    Node.DOCUMENT_TYPE_NODE   文档类型节点（DOCTYPE）

documentFragment   11    Node.DOCUMENT_FRAGMENT_NODE  文档片段节点（不属于文档树，是最小片段，可以作为临时占位符，将它插入文档时，只会插入它的子孙元素，而不是它本身）

注意：IE8及以下没有node，使用常量来判断nodeType会报错：“Node”未定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>

</head>
<body>
    <div id="container"></div>
    <script>
        window.onload=function(){

            var container=document.getElementById("container");
            if(container.nodeType==Node.ELEMENT_NODE){
                alert("是元素节点");
            }
        }
    </script>
</body>
</html>

因此不建议使用常量来判断，建议使用数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>

</head>
<body>
    <div id="container"></div>
    <script>
        window.onload=function(){

            var container=document.getElementById("container");
            // if(container.nodeType==Node.ELEMENT_NODE){
            //     alert("是元素节点");
            // }
            if(container.nodeType==1){
                alert("是元素节点");
            }
        }
    </script>
</body>
</html>

nodeName  节点名称

nodeValue  节点值

.attributes 保存元素的所有属性，可以使用数组下标访问某一个具体的属性

.chilsNodes 获取元素的所有子节点，可以使用数组下标访问某一个具体的属性

document.doctype  获取文档类型节点

document.createDocumentFlagment()  创建文档片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>

</head>
<body>
    <!-- 这是一段注释哈 -->
    <div id="container">这是里面的文本鸭</div>
    <script>
        window.onload=function(){

            var container=document.getElementById("container");
            console.log("元素节点："+container.nodeName+"/"+container.nodeValue);//元素节点：DIV/null
            var attr=container.attributes[0];//获取元素的第一个属性
            console.log("属性节点："+attr.nodeName+"/"+attr.nodeValue);//属性节点：id/container
            var text=container.childNodes[0];//获取元素的第一个子元素节点
            console.log("文本节点："+text.nodeName+"/"+text.nodeValue);//文本节点：#text/这是里面的文本鸭
            var comment=document.body.childNodes[1];//获取body元素的第二个子元素节点（第一个子元素节点是空白文本节点）
            console.log("注释节点："+comment.nodeName+"/"+comment.nodeValue);//注释节点：#comment/ 这是一段注释哈
            var doctype=document.doctype;//获取body元素的第二个子元素节点（第一个子元素节点是空白文本节点）
            console.log("文档类型节点："+doctype.nodeName+"/"+doctype.nodeValue);//文档类型节点：html/null
            var docFragment=document.createDocumentFragment();//获取body元素的第二个子元素节点（第一个子元素节点是空白文本节点）
            console.log("文档片段节点："+docFragment.nodeName+"/"+docFragment.nodeValue);//文档片段节点：#document-fragment/null
        }
    </script>
</body>
</html>

当script脚本在DOM元素之前，会无法获取到DOM元素

因为把js代码放在head中，代码顺序执行，当页面在浏览器中打开时，会先执行js代码，再执行body里面的dom结构。如果js执行时要获取body中的元素，那么就会报错，因为页面的结构还没有加载进来。

可以使用window.onload解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){

            var container=document.getElementById("container");
            console.log(container);
        }
    </script>
</head>
<body>
    <!-- 这是一段注释哈 -->
    <div id="container">这是里面的文本鸭</div>

</body>
</html>

window.onload缺点：等待DOM树的加载和外部资源全部加载完成

如果页面引用了很多外部资源，会导致加载慢，影响用户体验

---

最佳解决方案，jquery的$(document).ready()

此处使用原生js仿写该方法

---

DOMContentLoaded  加载完dom树，但还没有开始加载外部资源

IE不支持该方法，使用：document.documentElement.doScroll("left")

---

监听document的加载状态  document.onreadystatechange

document加载完成  document.readyState=="complete"

arguments.callee  调用函数自身

自己写的DomReady.js

function myReady(fn){

    /*
    现代浏览器操作
    */
    if(document.addEventListener){
        //现代浏览器操作
        document.addEventListener("DOMContentLoaded",fn,false);//false表示在冒泡阶段捕获
    }else{
        //IE环境操作
        IEContentLoaded(fn);
    }

    /*
    IE环境操作
    */
    function IEContentLoaded(fn){

        // init()--保证fn只调用一次
        var loaded=false;
        var init=function(){
            if(!loaded){
                loaded=true;
                fn();
            }
        }

        // 如果DOM树加载还没完成，就不停尝试
        (function(){
            try{
                // 如果DOM树加载还没完成，会抛出异常
                document.documentElement.doScroll("left");
            }catch(e){
                // 尝试失败，则再次尝试
                setTimeout(arguments.callee,50);
                return;//实现递归
            }
            //如果没有抛出异常，则立刻执行init()
            init();

        })();

        // DOM树加载完成之后，调用init()方法
        document.onreadystatechange=function(){
            if(document.readyState=="complete"){
                document.onreadystatechange=null;//清除监听事件
                init();
            }
        }
    }
}

调用该js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var container=document.getElementById("container");
            console.log(container);
        });
    </script>
</head>
<body>
    <!-- 这是一段注释哈 -->
    <div id="container">这是里面的文本鸭</div>

</body>
</html>

实现各浏览器都能成功获取到~

下面来真实感受下window.onload 和domReady的区别！！！

使用多张大图图片来模拟加载时长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>

</head>
<body>
    <!-- 这是一段注释哈 -->
    <div id="container">这是里面的文本鸭</div>
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">
    <img src="source/cat.jpg">

    <script>

        myReady(function(){
            alert("domReady!");
            domready=new Date().getTime();
        });

        window.onload=function(){
            alert("windowLoaded!");
            windowload=new Date().getTime();
        }

    </script>
</body>
</html>

发现先弹出domReady

等到图片加载完成之后，才弹出windowLoaded

证实windowLoaded耗时比较久

---

元素节点的类型判断

isElement() 判断是否是元素节点

isHTML() 判断是否是html文档的元素节点

isXML() 判断是否是xml文档的元素节点

contains()  判断元素节点之间是否是包含关系

.nextSibling  获取元素的兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>

</head>
<body>

    <div id="container">这是里面的文本鸭</div><!-- 这是一段注释哈 -->

    <script>

        myReady(function(){

            function isElement(el){
                return !!el && el.nodeType===1;
            }

            console.log(isElement(container));
            console.log(isElement(container.nextSibling));
        });

    </script>
</body>
</html>

该方法有一个Bug，即如果有一个对象设置了nodeType属性，会导致判断错误

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>

</head>
<body>

    <div id="container">这是里面的文本鸭</div><!-- 这是一段注释哈 -->

    <script>

        myReady(function(){

            function isElement(el){
                return !!el && el.nodeType===1;
            }

            var obj={
                nodeType:1
            }
            console.log(isElement(obj));//true
        });

    </script>
</body>
</html>

isXML() 最严谨的写法

.createElement() 创建元素

如果不区分大小写，则为html文档的元素节点；

如果区分大小写，则为xml文档的元素节点

.ownerDocument返回元素自身的文档对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>

</head>
<body>

    <div id="container">这是里面的文本鸭</div><!-- 这是一段注释哈 -->

    <script>

        myReady(function(){
            // 判断是否是元素节点
            function isElement(el){
                return !!el && el.nodeType==1;
            }
            // 判断是否是xml文档
            function isXML(el){
                return el.createElement("p").nodeName!==el.createElement("P").nodeName;
            }
            // 判断是否是html文档
            function isHTML(el){
                return el.createElement("p").nodeName===el.createElement("P").nodeName;
            }
            // 判断是否是html文档的元素节点
            function isHTMLNode(el){
                if(isElement(el)){
                    return isHTML(el.ownerDocument);
                }
                return false;
            }
            console.log(isXML(document));//false
            console.log(isHTML(document));//true
            console.log(isHTMLNode(container));//true
        });

    </script>
</body>
</html>

.containers 判断某个节点是否包含另一个节点

谷歌浏览器表现正常，而IE浏览器要求两个节点都必须是元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>

</head>
<body>

    <div class="parent" id="parent">
        <div class="child" id="child">这是文本节点</div>
    </div>

    <script>

        myReady(function(){
            var parent=document.getElementById("parent");
            var child=document.getElementById("child");
            console.log(parent.contains(child));//true

            var text=child.childNodes[0];
            console.log(parent.contains(text));//谷歌浏览器true，IE浏览器为false
        });

    </script>
</body>
</html>

接下来给出兼容性写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>

</head>
<body>

    <div class="parent" id="parent">
        <div class="child" id="child">这是文本节点</div>
    </div>

    <script>

        myReady(function(){
            var parent=document.getElementById("parent");
            var child=document.getElementById("child");
            console.log(parent.contains(child));//true

            var text=child.childNodes[0];
            console.log(parent.contains(text));//谷歌浏览器true，IE浏览器为false

            function fixContains(pNode,cNode){
                try{
                    while(cNode=cNode.parentNode){
                        if(pNode===cNode) return true;
                    }
                    return false;
                }catch(e){
                    return false;
                }
            }
            console.log(fixContains(parent,text));//谷歌浏览器true，IE浏览器为true
        });

    </script>
</body>
</html>

在所有浏览器里都能返回true，哪怕不是元素节点