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</style>
        body{
            width:100%;
            height;
        }
    >

bodydiv id="container"></divscript
        window.onload=function(){

            var containerdocument.getElementById("container);
            if(container.nodeType==Node.ELEMENT_NODE){
                alert(是元素节点);
            }
        }    
    html>

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

// if(container.nodeType==Node.ELEMENT_NODE){
                 alert("是元素节点");
             }
            1){
                alert(>

nodeName 节点名称

nodeValue 节点值

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

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

document.doctype 获取文档类型节点

document.createDocumentFlagment() 创建文档片段

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

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

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

可以使用window.onload解决

);
            console.log(container);
        }    
    >

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环境操作
     IEContentLoaded(fn){

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

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

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

调用该js

script src="DomReady.js"
        myReady((){
            );
            console.log(container);
        });
    >

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

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

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

img ="source/cat.jpg">

    

        myReady((){
            alert(domReady!);
            domreadynew Date().getTime();
        });

        window.onloadwindowLoaded!);
            windowload Date().getTime();
        }

    >

发现先弹出domReady

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

证实windowLoaded耗时比较久

元素节点的类型判断

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

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

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

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

.nextSibling 获取元素的兄弟节点

>
    
    >-->

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

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

    >

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


        
        myReady(;
            }

             obj{
                nodeType:
            }
            console.log(isElement(obj));true
        });

    >

isXML() 最严谨的写法

.createElement() 创建元素

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

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

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

 判断是否是元素节点
            ;
            }
             判断是否是xml文档
             isXML(el){
                return el.createElement(p).nodeName!==el.createElement(P).nodeName;
            }
             判断是否是html文档
             isHTML(el){
                 判断是否是html文档的元素节点
             isHTMLNode(el){
                (isElement(el)){
                     isHTML(el.ownerDocument);
                }
                false;
            }
            console.log(isXML(document));false
            console.log(isHTML(document));            console.log(isHTMLNode(container));>

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

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

class="parent" id="parent">
        ="child"="child">这是文本节点 parentparent childchild);
            console.log(parent.contains(child));true

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

接下来给出兼容性写法

谷歌浏览器true，IE浏览器为false

             fixContains(pNode,cNode){
                try{
                    while(cNodecNode.parentNode){
                        (pNodecNode) true;
                    }
                    ;
                }catch(e){
                    ;
                }
            }
            console.log(fixContains(parent,text));谷歌浏览器true，IE浏览器为true
>

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

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

猜你在找的JavaScript相关文章