JAVAScript基础学习--dom节点操作

节点属性

 

1.childNodes  返回包含被选节点的子节点的 NodeList

 

​ 如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

 

​ 如需循环子节点列表，使用 nextSibling 属性，要比使用父对象的 childNodes 列表效率更高。

 

2.firstChild 返回被选节点的第一个子节点,如果选定的节点没有子节点，则该属性返回 NULL。

 

​ 获取指定元素的第一个子节点，可以是元素节点，也可以是文本节点。

 

3.lastChild 可返回文档的最后一个子节点。

 

4.ownerDocument 可返回某元素的根元素。

 

5.parentNode 可返回某节点的父节点。如果指定的节点没有父节点则返回 null。

 

6.previousSibling 可返回某节点之前紧跟的节点（处于同一树层级）

 

​ 返回节点以节点对象返回。注意：如果没有此节点，那么该属性返回 null。

 

7.nextSibling  可返回某个元素之后紧跟的节点（处于同一树层级中）。

 

​ 返回节点以节点对象返回。注意： 如果元素紧跟后面没有节点则返回 null.

<ul id="ul">

        <li>11</li>

        <li>22</li>

        <li id="a">33</li>

        <li>44</li>

    </ul>

    <script >

       var ulDom=document.getElementById("ul");

           console.log("ul的所有子节点-元素+文本",ulDom.childNodes);

           console.log("ul的所有子元素节点", ulDom.children);

 

           console.log("ul下第一个子节点",ulDom.firstChild);

           console.log("ul下第一个子元素节点",ulDom.firstElementChild);

           console.log("ul下最后一个子节点",ulDom.lastChild);

           console.log("ul下最后一个子元素节点",ulDom.lastElementChild);

           console.log("-----------------------");

           var aLiDom= document.getElementById("a");

           console.log("上一个兄弟节点",aLiDom.previousSibling);

           console.log("上一个兄弟元素 节点",aLiDom.previousElementSibling);

           console.log("下一个兄弟节点",aLiDom.nextSibling);

           console.log("下一个兄弟元素 节点",aLiDom.nextElementSibling);

           console.log("父节点",aLiDom.parentNode );

           console.log("父节点",aLiDom.parentElement );

 

案例:网站购物车数量加减数量的实现,如下图:

 

代码如下:

<button id="jian">-</button>1<button id="jia">+</button>

    <script>

      var i=1;

      //获取加好按钮

      var jiadom=document.getElementById("jia");

      //获取减号按钮

      var jiandom=document.getElementById("jian");

      //绑定点击事件

      jiadom.onclick=function(){

        //获取加号的前节点  

        var textnodes=jiadom.previousSibling;

        //点一下事件,加1

          i++;

          textnodes.nodeValue=i;

      }

      jiandom.onclick=function(){

          var textnodess=jiandom.nextSibling;

          if(i>0){

            i--;

          textnodess.nodeValue=i;

          }

        

      }

创建元素节点

代码如下:

<div></div>

 

    <script>

        var h1Dom= document.createElement("h1");

                console.log("创建元素节点",h1Dom);

 

        var textDom=document.createTextNode("h1");

                console.log("创建文本节点",textDom);

    </script>

添加

 

​ 父节点.appendChild() 节点的子节点列表的末尾添加新的子节点。

 

   父节点.append() 可以传入多个

 

​ 父节点.insertBefore(插入的新节点，原节点)   在已有的子节点前插入一个新的子节点

<div id="box">

        <h1>123</h1>

    </div>

    <script>

        //创建h2元素标签对象

        var h2dom=document.createElement("h2");

        h2dom.innerText=456;

        //创建h3元素标签对象

        var h3dom=document.createElement("h3");

        h3dom.innerText=786;

        //获取div

        var boxdom=document.getElementById("box");

        //父元素.appendchild(子元素),在父元素内部  末尾追加一个元素节点

        

        boxdom.appendChild(h2dom);

        boxdom.appendChild(h3dom);

 

        //追加两个??多个?

        //append可在父元素内部  末尾添加多个节点

        //boxdom.append(h2dom,h3com);

         //---------------

         //在父元素  内部  某个元素  之前添加

        //boxdom.insertBefore(新元素,目标元素)

        //在div内部h1之前添加p标签,内容为哈哈哈

        //1/创建p

        var  pdom=document.createElement("p");

        //2/赋值p的内容

        pdom.innerText="哈哈";

        pdom.style.color="red";

        //3获取div

        var divdom=document.getElementById("box");

        //4获取h1

        var h1dom=divdom.firstElementChild;

        //5将p添加到div内,h1之前

          divdom.insertBefore(pdom,h1dom);

          //思考,如果没有h1呢?如何找到文本节点

    </script>

替换

 

​ 父节点.replaceChild(新节点，老节点)

    <div id="box">

        <h1 id="h1">123</h1>

    </div>

    <script>

// 将 h1 标签 替换为 p 标签

 

        //1、 创建p标签

        var pdom=document.createElement("p");

        //2、 p标签内容 == h1 内容

        //2-1、获取 h1 标签

       var  h1dom=document.getElementById("h1");

        //2-2、获取 h1 的内容

       var h1Text=h1dom.innerText;

        //2-3、p标签内容 = h1 内容

        pdom.innerText=h1dom.innerText;

        //3、替换 父元素.replaceChild(新节点，老节点)    

        //3-1、获取 父元素 div

        var divdom=document.getElementById("box");

        divdom.replaceChild(pdom,h1dom);

    </script>

删除

 

​ 父节点.removeChild(要删除的元素)  方法可从父节点下的子节点列表中删除某个节点

 

​ 自身节点.remove() 将本身移除掉

    <div>

        <h1 id="h1">123</h1>

        <h2 id="h2">456</h2>

    </div>

    <script>

        //父节点.removechild (要删除的元素)

        //1获取父节点div

        var divdom=document.getElementById("box");

        //获取要删除的元素

        var h1dom=document.getElementById("h1");

        //删除//

        divdom.removeChild(h1dom);

    </script>

    <script>

            //父节点.removechild (要删除的元素)

        //1获取父节点div

        var divdom=document.getElementById("box");

        //获取要删除的元素

        var h2dom=document.getElementById("h2");

        //删除//

        h2dom.remove(); 

    </script>

克隆

 

DOM1.cloneNode(boolean) : 复制一个节点

true：深复制，复制节点及其整个子节点树

false : 浅复制，只复制节点本身。默认是false

    <div id="box">

        <h1 id="h1">123</h1>

    </div>

    <script>

        //克隆h1--添加带box内部末尾

        //1,获取h1 

        var h1dom=document.getElementById("h1");

        //2克隆,dom1.cloneNode(boolean)

        //true:深复制,复制节点及其子节点

        //flase:钱复制,支付至节点本身,默认为false;

        var ch1dom=h1dom.cloneNode(true);

        //将克隆得到的元素放入box的内部末尾

        //先获取box

        var divdom=document.getElementById("box");

        //父节点.appendChild(克隆得到的元素)

        divdom.appendChild(ch1dom);

    </script>