DOM文档对象模型

Posted 毁梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM文档对象模型相关的知识,希望对你有一定的参考价值。

 

 DOM文档对象模型  

1、DOM对象分为: 

    a、Document对象;

    b、Element对象;

    c、Node对象;

2、DOM发展级别: 

    DOM有4个级别,分别为:

    a、DOM 0 级:定义Document对象的一些属性和方法;

    b、DOM 1 级;

    c、DOM 2 级;

    d、DOM 3 级;

    注:第 0 级和第 3 级不是W3C的官方标准;

3、DOM组成: 

    a、Core DOM:也称核心DOM编程,定义标准针对任何结构文档的对象;

    b、XML DOM:定义一套标准的针对 XML 文档的对象;

    c、html DOM:定义一套标准的针对 XML 文档的对象;

4、DOM节点: 

    a、文档节点:相当于document对象;

    b、元素节点:HTML标签;

    c、文本节点:文本内容;

    d、属性节点:标签属性;

    注意:代码注释也是一种注释节点,但一般情况不做考虑。

 5、判断节点类型: 

    a、文档节点-----nodeType值为“9”;

    b、元素节点-----nodeType值为“1”;

    c、属性节点-----nodeType值为“2”;

    d、文本节点-----nodeType值为“3”;



 一、Document对象: 

    1、DOM 查询 (获取元素节点)

        A、通过标签的 id 属性值获取:

            语法:let num = document.getElementById(id属性);

            输出:console.log(num);

        B、通过标签的 class 属性值获取:

            语法:let num = document.getElementsByClassName(class属性);

            输出:console.log(num[xx]);

                 class获取的元素结果是一个数组形式,所以具体到某一位需要通过数组的下标[xx]去获取。

        C、通过标签名获取:

            语法:let num = document.getElementByTagName(标签名);

            输出:console.log(num[xx]); 

                 标签名获取的元素结果是一个数组形式,所以具体到某一位需要通过数组的下标[xx]去获取。

        D、通过标签的 name 属性值获取:

            语法:let num = document.getElementsByName(name属性值);

            输出:console.log(num[0]);

                 name属性值获取的元素结果是一个数组形式,所以具体到某一位需要通过数组的下标[xx]去获取。

        E、通过 CSS 选择器方式获取:

            返回第一个选择器匹配的 HTML 页面元素;

            语法:let num = document.querySelector(选择属性);

            输出:console.log(num);

        F、通过 CSS 选择器方式获取:

            返回全部选择器匹配的 HTML 页面元素;

            语法:let num = document.querSelectorAll(选择属性);

            输出:console.log(num);

    2、DOM查询方法大致可分为以下两类:

        a、传统型:

            getElementById-------------ID属性;

            getElementsByClassName-----class属性;

            getElementByTagName--------标签名;

            getElementsByName----------name属性;

        b、HTML5新增:

            querySelector------------- CSS 选择器;

            querSelectorAll----------- CSS 选择器;

    3、创建节点:

        a、创建元素节点:

            I、通过 document 对象创建一个新的元素节点 (标签);

              语法:document.createElement(标签名);

        b、创建文本节点:

            II、通过 document 对象创建一个新的文本节点(文本内容);

               语法:document.createTextNode(文本内容);

        c、创建属性节点:

            III、通过 document 对象创建一个新的属性节点;

                语法:document.createAttribute(属性名);



 二、Node对象 

    1、遍历节点:

        a、获取父节点:(parentNode)

            通过 HTML 页面的指定标签查找其父节点。

            语法:子节点.parentNode

            例:

                <div id="father">

                    <div id="son"></div>

                </div>



                let num = document.getElementById("son");

                let sum = num.parentNode;

                console.log(sum);



        b、获取子节点:(firstChild)

            通过 HTML 页面的指定标签查找其子节点。

            语法:父节点.firstChild

            注意:获取指定标签的第一子节点;

            例:

                <div id="father">

                    <div id="son1"></div>

                    <div id="son2"></div>

                    <div id="son3"></div>

                </div>



                var num = document.getElementById("father");

                var sum = num.firstChild;

                console.log( sum );



            语法:父节点.lastChild;

            注意:获取指定标签的最后一个子节点;

            例:

               <div id="father">

                    <div id="son1"></div>

                    <div id="son2"></div>

                    <div id="son3"></div>

                </div>



                var num = document.getElementById("father");

                var sum = num.lastChild;

                console.log( sum );



            语法:父节点.childNodes;

            注意:获取指定标签的所有子节点;

            例:

               <div id="father">

                    <div id="son1"></div>

                    <div id="son2"></div>

                    <div id="son3"></div>

                </div>



                var num = document.getElementById("father");

                var sum = num.childNodes;

                console.log( sum );



        c、获取兄弟节点:

            通过 HTML 页面的指定标签查找兄弟节点:

            语法:兄弟节点.previousSibling;

            注意:previousSibling----获取指定节点的前一个兄弟节点。

            例:

                <div id="brother1"></div>

                <div id="brother2"></div>

                <div id="brother3"></div>

 

                var num = document.getElementById("brother2");

                var sum = num.previousSibling;

                console.log( sum ); 

                console.log( sum.previousSibling );



            注意:nextSibling----获取指定节点的最后一个兄弟节点。

            例:

                <div id="brother1"></div>

                <div id="brother2"></div>

                <div id="brother3"></div>

 

                var num = document.getElementById("brother2");

                var sum = num.nextSibling;

                console.log( sum ); 

                console.log( sum.nextSibling );



        d、插入节点:

            I、appendChild():将一个节点作为最后一个子元素添加到指定父节点。

              语法:父节点.appendChild(子节点);

              例:

                let num = document.createElement("div");

                document.body.appendChild( num );

            II、insertBefore() :在父节点的某个已有的子节点之前再插?入一个子节点。

              语法:父节点.insertBefore(新子节点,旧子节点);

              例:

                let num = document.createElement("div");  // 创建 div

                document.body.appendChild( num );         // 将其插?入到 body 的末尾

                let sum = document.createElement("a");      // 创建 a

                document.body.insertBefore( sum, num ); // 将其插?入到 div 之前

            

            

        e、删除节点:

                removeChild()

                语法:父节点.removeChild(子节点);

                例:

                    <div id="father">

                        <div id="son"></div>

                    </div>

                    

                    var father = document.getElementById("father"); // 获取?父节点

                    var son = document.getElementById("son"); // 获取?子节点

                    father.removeChild( son );                  // 删除子节点

                    

        f、替换节点:

                 replaceChild();

                 语法:父节点.replaceChild(新子节点,旧子节点);

                 例:

                    <div id="father">

                        <div id="son"></div>

                    </div>



                    var father = document.getElementById("father"); // 获取?父节点

                    var son = document.getElementById("son"); // 获取已有?子节点

                    var newChild = document.createElement("p"); // 创建新节点

                    father.replaceChild( newChild, son ); // 新节点替换已有旧?子节点



        g、复制节点:

                 cloneNode();

                 语法:选中节点.cloneNode(布尔值true/false);

                 注意:如果为true则该节点后面所有子节点也会被复制;如果为false则只复制该节点本身。

                 例:

                    <div id="father">

                        <div id="son"></div>

                    </div>

                    

                    var father = document.getElementById("father"); // 获取节点

                    var newFather = father.cloneNode( true ); // 复制已获取节点

                    document.body.appendChild( newFather ); // 将复制好的新节点添加到 body 

三、Element对象 

    1、Element与Node

      A、通过节点访问或操作HTML页面内容:

            元素节点:表示HTML页面中的标签。

            属性节点:表示HTML页面中的属性。

            文本节点:表示HTML页面中标签的文本内容。



      B、通过元素访问或操作HTML页面内容:

            元素:表示HTML页面中的标签。

 I、遍历元素 

    1、获取父元素:

        parentElement;

        语法:子元素.parentElement

        例、

           <div id="father">

               <div id="son"></div>

           </div>

            

            let sonEle = document.getElementById("son");

            let fatherEle = son.parentElement;

            console.log( fatherEle );

        注意:

            “Node 对象”的 parentNode 和“Element 对象”的 parentElement 两个?方法都可以?用来获取?级,但是有区别:

            parentNode 表示获取指定元素的?节点。这个?节点可能是元素节点,也可能是?文档节点。

            parentElement 表示获取指定元素的?元素节点。该元素没有?节点,或者它的?父节点不是?个元素节点,则返回 null 。

    2、获取子元素:

        // 获取子元素的第一个元素

            let fatherEle = document.getElementById("father");

            let aa = fatherEle.firstElementChild;    /*获取子元素的第一个元素*/

            let ab = fatherEle.lastElementChild;    /*获取子元素的最后一个元素*/

            let ac = fatherEle.children;            /*获取子元素中的所有元素*/

            console.log(aa);

            console.log(ab);

            console.log(ac);

     
      
    3、获取兄弟元素:

        // 获取兄弟元素

            let ad = document.getElementById("son2");

            let ae = ad.previousElementSibling;        /*获取兄弟元素的前一个元素*/

            let af = ad.nextElementSibling;            /*获取兄弟元素的后一个元素*/

            console.log(ae);

            console.log(af);

以上是关于DOM文档对象模型的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript之DOM文档对象模型

DOM 文档对象模型+倒计时

JavaScript(DOM文档对象模型)

JS第二部分--DOM文档对象模型

DOM文档对象模型

JS DOM(文档对象模型)与BOM(浏览器对象模型)