（5）通过节点的层次关系获取节点对象：增删改查节点

最新推荐文章于 2022-06-26 17:42:59 发布

FixedStarHaHa

最新推荐文章于 2022-06-26 17:42:59 发布

阅读量1.4k

点赞数

分类专栏： DOM 文章标签：对象

本文链接：https://blog.csdn.net/jiangshangchunjiezi/article/details/76739158

版权

DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

通过节点的层次关系获取节点对象
关系：
1，父节点：parentNode:对应一个节点对象
2，子节点：childNodes：对应一个节点集合
3，兄弟节点
上一个兄弟节点：previouesSibling
下一个兄弟节点：nextSibling

* 除了求父节点，其他节点均要判断nodes[i] instanceof Element，否则会输出空白文本节点#text*
获取子父，用document对象中的方法，在下面的div演示中，除了层次关系，都用的是div中的方法
* 一、获取层次节点*

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<script type="text/javascript">

       function getNodeByLevel1()
       {
           //获取页面中的表格节点
           var tabNode=document.getElementById("tabid");

          //获取父节点，parentNode
          var node=tabNode.parentNode;
          //alert(node.nodeName);//body

          //获取子节点
        /*  var nodes=tabNode.childNodes;
          //alert(nodes.length);
          for(var i=0;i<nodes.length;i++)
          {
              if(nodes[i] instanceof Element)//在现在的浏览器解析中，会将回车符也作为一个节点，nodes[i] instanceof Text，则输出#text
                 alert(nodes[i].nodeName);
          }
          */


          //获取上一个兄弟节点
        /*  var nodebro=tabNode.previousSibling;
          if(nodebro instanceof Text)
             alert(nodebro.previousSibling.nodeName);//div
          else
             alert(nodebro.nodeName);
         */

         //获取下一个兄弟节点
         var nodebro=tabNode.nextSibling;
          if(nodebro instanceof Text)
             alert(nodebro.nextSibling.nodeName);//dl
          else
             alert(nodebro.nodeName);   
       }
</script>
<input type="button" value="通过节点层次获取节点" onclick="getNodeByLevel1()"/>

<div>div区域</div>
<table id="tabid">
        <tr>
           <td>单元格1</td>
           <td>单元格2</td>
       </tr>
</table>
<dl>
    <dt>上层项目</dt>
    <dt>下层项目</dt>
</dl>
<a href="">一个超链接</a>
</body>
</html>

二、在层次上添加节点：添加文本、按钮或者用innerHTML添加标签

<style type="text/css">

        div{
            border:#30F 1px solid;
            width:200px;
            padding:30px;/*内边距文字边界距离*/
            margin:10px;/*外边距，即不同的div之间的距离*/
        }
        div#div_1/*id选择器，*/
        {
            background-color:#93F;

        }

</style>
</head>

<body>
   <script type="text/javascript">
    //创建并添加节点
    //需求：在div_1节点中添加一个文本节点
    function crtAndAdd()
    {
        //1,创建节点，使用document中的createTextNode方法
        var oTextNode=document.createTextNode("创建一个新文本节点");

        //2,获取div_1节点
        var oDivNode=document.getElementById("div_1");

        //3，将文本节点添加到div_1中,用div中的appendChild方法
        oDivNode.appendChild(oTextNode);

    }

    function crtAndAdd2()
    {
        //需求：在div_1中创建并添加一个按钮节点

        //创建一个按钮节点，用document中的createElement元素
        //1，创建一个按钮节点,要先创建input标签节点，再添加属性为按钮
        var oButNode=document.createElement("input");
        oButNode.type="button";
        oButNode.value="一个新按钮";

        //2，获取div_1节点
        var oDivNode=document.getElementById("div_1");

        //3,将按钮添加到div_1节点中，用div中的appendChild方法
        oDivNode.appendChild(oButNode);

    }
    //通过另一种方式添加到div_1中
    function crtAndAdd3()
    {
        //使用容器型标签中的一个属性：innerHTML，这个属性可以设置html文本
        //1,获取div_1节点
        var oDivNode=document.getElementById("div_1");

        oDivNode.innerHTML="<input type='button' value='有个按钮'/>";
        //oDivNode.innerHTML="<a href='http://www.sina.com.cn'>有个超链接</a>";

    }
    </script>
    <input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
    <hr/>
     <div id="div_1">
     </div>

三、删除节点

<style type="text/css">

        div{
            border:#30F 1px solid;
            width:200px;
            padding:30px;/*内边距文字边界距离*/
            margin:10px;/*外边距，即不同的div之间的距离*/
        }

        div#div_2
        {
            background-color:#9F3;

        }

</style>
</head>
<body>
    function delNode()
    {
        //需求：删除div_2节点,
        //1，获取节点
        var oDivNode=document.getElementById("div_2");

        //用div中的removeNode方法，删除节点
        oDivNode.removeNode(true);//传true，能够删除子之后的所有元素，较少用

        //一般用removeChild方法,删除子节点
        //获取div_2的父节点，然后再用父节点的removeChild将div_2删除
        oDivNode.parentNode.removeChild(oDivNode);  
    }
    </script>

    <input type="button" value="删除节点" onclick="delNode()"/>

    <hr/> 
     <div id="div_2">
     好好学习，天天向上！
     </div>  
</body>
</html>

四、替换和克隆节点

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

        div{
            border:#30F 1px solid;
            width:200px;
            padding:30px;/*内边距文字边界距离*/
            margin:10px;/*外边距，即不同的div之间的距离*/
        }
        div#div_1/*id选择器，*/
        {
            background-color:#93F;

        }

        div#div_3
        {
            background-color:#630;

        }
</style>
</head>

<body>

    <script type="text/javascript">
    //用div_3节点替换div_1节点
    function updateNode()
    {
        /*获取div_1,div_3
         * 使用replaceNode进行替换
         */
         var oDivNode_1=document.getElementById("div_1");
         var oDivNode_3=document.getElementById("div_3");

         oDivNode_1.replaceNode(oDivNode_3);//用div_3替换div_1

         //但不建议用replaceNode方法，建议用replaceChild方法
         //1，获取div_1的父节点
         var oDivNode=document.getElementById(oDivNode_1);
         //2，用replaceChild方法进行替换
         oDivNode.parentNode.replaceChild(oDivNode_3,oDivNode_1);//div_3的原位置删除

    }
    function updateNode()
    {
        //克隆div_3
        var oDivNode=document.getElementById("div_3");
        var oDivNodeNew=oDivNode.cloneNode(true);

        var oDivNode_1=document.getElementById("div_1");
        oDivNode_1.parentNode.replaceChild(oDivNodeNew,oDivNode_1);


    }


    </script>
    <input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
    <input type="button" value="删除节点" onclick="delNode()"/>
    <input type="button" value="修改节点" onclick="updateNode()"/>
    <input type="button" value="克隆节点" onclick="updateNode2()"/>
    <hr/>
     <div id="div_1">
     </div>

     <div id="div_2">
     好好学习，天天向上！
     </div>

     <div id="div_3">
     div区域演示文字
     </div>

     <div id="div_4">
     节点的增删改查
     </div>

</body>
</html>

FixedStarHaHa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（5）通过节点的层次关系获取节点对象：增删改查节点

通过节点的层次关系获取节点对象关系： 1，父节点：parentNode:对应一个节点对象 2，子节点：childNodes：对应一个节点集合 3，兄弟节点上一个兄弟节点：previouesSibling 下一个兄弟节点：nextSibling* 除了求父节点，其他节点均要判断nodes[i] instanceof Element，否则会输出空白文本节点#text*
复制链接

扫一扫

专栏目录