JavaScript---DOM模型之DOM树节点的增、删、改、查（一）

最新推荐文章于 2023-06-24 23:45:58 发布

海那边的小萌男

最新推荐文章于 2023-06-24 23:45:58 发布

阅读量1.5k

点赞数 2

分类专栏： J2EE 文章标签： dom 标签

本文链接：https://blog.csdn.net/weixin_37720904/article/details/71440772

版权

J2EE 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

玩转DOM模型
我们想学好DOM模型，无非就是就是对DOM树的增、删、改、查。所以就来好好学学吧，嘻嘻！一起进步。

DOM树节点的查

查，有两种方式

第一种：直接查，4种常用方法

通过getElementById()—通过标签的id属性—（精确查找）拿到单个节点
通过getElementsByName()—通过标签的name属性—（条件匹配）拿到集合
通过getElementsByTagName()—通过标签名称 —（条件匹配）拿到集合
通过getElementsByClassName()—通过标签的class属性—（条件匹配）拿到集合

通过getElementById()—通过标签的id属性
（通过拿到节点，然后在网页中节点的位置输入文本信息）

<body>
        查询节点类别1(level0):<br/>
      1)通过getElementById()---通过标签的id属性<br/>
      2)通过getElementsByName()---通过标签的name属性<br/>
      3)通过getElementsByTagName()---通过标签名称 <br/>
      4)通过getElementsByClassName()---通过标签的class属性<br/>

      <hr>
        <input type="button" value="ById查询演示" onclick="demo1()">
        <div id="div1">getElementById()方法演示</div>
      <script type="text/javascript">
            function demo1(){
                var oDiv1 = document.getElementById("div1");
                oDiv1.innerText = "成功拿到了这个节点！";
            }
      </script>

  </body>

这里写图片描述

通过getElementsByName()—通过标签的name属性
（通过拿到节点，然后在网页中节点的位置将编辑框内的value修改）

<body>
        查询节点类别1(level0):<br/>
      1)通过getElementById()---通过标签的id属性<br/>
      2)通过getElementsByName()---通过标签的name属性<br/>
      3)通过getElementsByTagName()---通过标签名称 <br/>
      4)通过getElementsByClassName()---通过标签的class属性<br/>

      <hr>
        <input type="button" value="ByName查询演示" onclick="demo1()">
        <input type="text" value="请输入姓名" name="UserName" >
      <script type="text/javascript">
            function demo1(){
                var ByName = document.getElementsByName("UserName");
                //这种方法拿到的是 所有name属性=“UserName”的节点集合
                //我们这里只有一个所以是第零个
                ByName[0].value = "用getElementsByName方法拿到节点，修改了value值";
            }
      </script>

  </body>

这里写图片描述

通过getElementsByTagName()—通过标签名称
（通过拿到节点，然后在网页中节点的位置将编辑框内的value修改）

<body>
        查询节点类别1(level0):<br/>
      1)通过getElementById()---通过标签的id属性<br/>
      2)通过getElementsByName()---通过标签的name属性<br/>
      3)通过getElementsByTagName()---通过标签名称 <br/>
      4)通过getElementsByClassName()---通过标签的class属性<br/>

      <hr>
        <input type="button" value="ByTagName查询演示" onclick="demo1()">
        <input type="text"  name="pwd" >
      <script type="text/javascript">
            function demo1(){
                var ByTgName = document.getElementsByTagName("input");
                //这种方法拿到的是 所有标签为"input"的节点集合
                //我们这里有2个所以是第1个
                ByTgName[1].value = "用getElementsByTgName方法拿到节点";
            }
      </script>

  </body>

这里写图片描述

第四中ByClassName就不演示了，都和前面两种类似。

总结一下，这种直接查询。因为document是拿到整个网页的DOM树，所以所有的节点都可以拿到，还有一种在部分树中查询节点，即查询的范围不是整个DOM树，可以是部分树。下面演示一下

例：网页中常常有如图下这样的情况：商品展示超链接需要设置新开窗口打开，还有友情连接超链接要设置为直接当前窗口打开，都是a标签下，怎么设置呢？代码怎么写呢？
这里写图片描述
代码如下

友情链接:<br/>
        <a href="http://www.hncu.net">城院首页</a>  &nbsp;&nbsp;&nbsp;
        <a href="http://www.sina.com">新浪首页</a> 

        <br/>
        商品展示:<br/>
        <div id="goods">
            <a href="goods/1.html">商品1</a>  &nbsp;&nbsp;&nbsp;
            <a href="goods/2.html">商品2</a>  &nbsp;&nbsp;&nbsp;
            <a href="goods/3.html">商品3</a> 
        </div>

解决思路：我们只要对div中的 a 标签的 target 属性设置为 “_blank” ，前面的默认，就可以完成后面连接新窗口开，前面连接默认当前窗口打开

（当然了，商品页面，记得写啊！随便写个网页就好了，这不是重要的点）
代码实现：

<body>
        友情链接:<br/>
        <a href="http://www.hncu.net">城院首页</a>  &nbsp;&nbsp;&nbsp;
        <a href="http://www.sina.com">新浪首页</a> 

        <br/>
        商品展示:<br/>
        <div id="goods">
            <a href="goods/1.html">商品1</a>  &nbsp;&nbsp;&nbsp;
            <a href="goods/2.html">商品2</a>  &nbsp;&nbsp;&nbsp;
            <a href="goods/3.html">商品3</a> 
        </div>


      <hr>
        <input type="button" value="设置超链接" onclick="demo1()">
      <script type="text/javascript">
            function demo1(){

                //第一步，先拿到 需要设置新窗口打开的标签的父亲节点---div， 就相当于拿到部分树了
                 var div = document.getElementById("goods");
                //第二部：再在div 树下面查询所有的a 节点
                var aNode = div.getElementsByTagName("a");
                //第三部： 设置aNode节点下面的target属性
                for(var i=0;i<aNode.length;i++){
                    aNode[i].target="_blank";
                }
            }
      </script>

  </body>

演示的话，我再想想要怎么看到这个过程。
（没调用函数前，当前窗口开，上面是3个窗口）
这里写图片描述
（调用函数后，新窗口开，上面是4个窗口）

下面是关于直接查询的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DOM模型演示---增删改查中的查询</title>
    </head>

    <body>
    查询节点类别1(level0):
      1)通过getElementById()---通过标签的id属性
      2)通过getElementsByName()---通过标签的name属性
      3)通过getElementsByTagName()---通过标签名称 
      4)通过getElementsByClassName()---通过标签的class属性

      <hr/>
        <input type="button" value="演示节点的查询1" onclick=" demo1();">  <br />
        <div id="div1">湖南城市学院</div>

        <script type="text/javascript">
            //1)通过getElementById()---通过标签的id属性
            function demo1(){
                var oDiv = document.getElementById("div1");
                oDiv.innerText="城院很好!";//写
            }         
        </script>


        <input type="button" value="演示节点的查询2" onclick=" demo2();">  <br />
        <input type="text" name="userName" value="请输入姓名">

        <script type="text/javascript">
            //2)通过getElementsByName()---通过标签的name属性---注意，返回的是一个数组
            function demo2(){
                var oInputNames = document.getElementsByName("userName");
                //读
                //alert(oInputNames[0].nodeName);
                //alert(oInputNames[0].value);
                //写
                //oInputNames[0].value="abc123";
                document.getElementsByName("userName")[0].value="OKOK";
            }

        </script>

        <br/>
        <input type="button" value="演示节点的查询3" onclick=" demo3();">  <br />
        <input type="text" name="pwd" >

        <script type="text/javascript">
            //3)通过getElementsByTagName()---通过标签名---注意，返回的是一个数组
            function demo3(){
                document.getElementsByTagName("input")[4].value="asd12345";
            }
        </script>

        <br/>
        <input type="button" value="演示节点的查询4" onclick=" demo4();">  <br />
        <input type="text" name="code" class="aa">

        <script type="text/javascript">
            //4)通过getElementsByClassName()---通过标签的class属性---注意，返回的是一个数组
            function demo4(){
                document.getElementsByClassName("aa")[0].value="112233aa";
            }
        </script>

       <hr/>
        通过普通元素(标签节点)，在它的子孙节点中进行level0查询即用
        getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()等方法。<br/><br/>

        友情链接:<br/>
        <a href="http://www.hncu.net">城院首页</a>  &nbsp;&nbsp;&nbsp;
        <a href="http://www.sina.com">新浪首页</a> 

        <br/>
        商品展示:<br/>
        <div id="goods">
            <a href="goods/1.html">商品1</a>  &nbsp;&nbsp;&nbsp;
            <a href="goods/2.html">商品2</a>  &nbsp;&nbsp;&nbsp;
            <a href="goods/3.html">商品3</a> 
        </div>

        <br/>
        <input type="button" value="演示节点的查询并设置用新窗口打开商品展示" onclick=" demo5();">  <br />
        <script type="text/javascript">
            function demo5(){
                var oDivGoods = document.getElementById("goods");
                var oAs = oDivGoods.getElementsByTagName("a");//在oDivGoods节点的子孙节点中进行level0的查询
                for( var i=0;i<oAs.length;i++ ){
                    oAs[i].target="_blank";
                }
            }
        </script>
    </body>
</html>

第二种：间接查（查表格元素时，有点坑，不同浏览器也有点不同）

通过节点在dom中的相互之间的辈份关系(父子、兄弟)进行查询。

属性:
firstChild、lastChild、nextSibling(下一个兄弟节点)、parentNode、previousSibling(上一个兄弟节点)
集合: childNodes(儿子们,包括元素和文本内容)、children(儿子们，仅包括元素,没有文本) —属性是不在儿子们当中的

先演示集合 childNodes(儿子们,包括元素和文本内容)、children(儿子们，仅包括元素,没有文本)

<input type="button" value="间接查询childNodes" onclick="demo1()">
        <input type="button" value="间接查询children" onclick="demo2()">
      <script type="text/javascript">
            function demo1(){
                var odiv =  document.getElementsByTagName("ul");
                // childNodes(儿子们,包括元素和文本内容) ---属性是不在儿子们当中的
                var oUI = odiv[0].childNodes;
                var str = "";
                for(var i=0;i<oUI.length;i++){
                    str+=oUI[i].nodeName+" ";
                }
                alert(str);
            }
            function demo2(){
                var odiv =  document.getElementsByTagName("ul");
                //children(儿子们，仅包括元素,没有文本) ---属性是不在儿子们当中的
                var oUI = odiv[0].children;
                var str = "";
                for(var i=0;i<oUI.length;i++){
                    str+=oUI[i].nodeName+" ";
                }
                alert(str);
            }
      </script>

这里写图片描述
查询UL中的自集合 childNodes

查询UL中的自集合 children

下面是关于间接查询的学习代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DOM模型演示---增删改查中的查询2</title>
    </head>

    <body>
    查询节点类别2(level1):
      通过节点在dom中的相互之间的辈份关系(父子、兄弟)进行查询。
     属性: firstChild、lastChild、nextSibling(下一个兄弟节点)、parentNode、previousSibling(上一个兄弟节点) <br/>
     集合: childNodes(儿子们,包括元素和文本内容)、children(儿子们，仅包括元素,没有文本)  ---属性是不在儿子们当中的
     <hr/>
        <input type="button" value="演示节点的查询1" onclick=" demo1();">  <br />
        <input type="button" value="演示节点的查询2" onclick=" demo2();">  <br />
        <input type="button" value="演示节点的查询3" onclick=" demo3();">  <br />
        <div id="div1">湖南城市学院</div>
        <table id="tab1">           
            <tr>
                <td>单元格1-1</td>
                <td>单元格1-2</td>
            </tr>
            <tr id="abc">
                <td>单元格2-1</td>
                <td>单元格2-2</td>
            </tr>
        </table>

        <script type="text/javascript">
            function demo1(){
                var oTable = document.getElementById("tab1");
                var oNode = oTable.firstChild;
                //alert(oNode.nodeType+","+oNode.nodeName);//3,#text ----注意，高版本IE和火狐中，换行符是被看成是上级节点的一个“文本内容”型的孩子节点
                //alert(oTable.childNodes[1].nodeType+","+oTable.childNodes[1].nodeName);//1,TBODY ----注意，表格中隐藏着一个<TBODY>标签，在该标签内部才是若干<tr>

                var oTbody = oTable.firstChild;
                while(oTbody.nodeType!=1){ //把换行符跳过
                    oTbody = oTbody.nextSibling;
                }
                //alert(oTbody.childNodes[0].nodeType+","+oTbody.childNodes[0].nodeName);//注意, <TBODY>的第0个孩子是第一个<TR>
                //显示<tbody>中的所有孩子
                var oNodes=oTbody.childNodes;
                for(var i=0; i<oNodes.length;i++){
                    alert(oNodes[i].nodeName+","+oNodes[i].nodeValue);
                }

            }   

            //获取表格中第一个<td>中的文本内容
            function demo2(){
                var oTable = document.getElementById("tab1");
                var oTdNode = oTable;
                oTdNode=nextNode(oTdNode);
                while(oTdNode.nodeName!="TD"){ //注意,这里不能用"<TD>"来判断
                    oTdNode=oTdNode.childNodes[0];
                    oTdNode=nextNode(oTdNode);
                }
                alert(oTdNode.innerText);               
            }
            //跳过空白符
            function nextNode(oNode){
                while(oNode.nodeName=="#text"){
                    oNode= oNode.nextSibling;
                }
                return oNode;
            }


            function demo3(){
                var oTable = document.getElementById("tab1");
                var oNode = oTable.parentNode.parentNode;
                //alert(oNode.nodeName); //HTML

                var oTbody=oTable.childNodes[1];
                var oNodes = oTbody.children;
                for(var i=0;i<oNodes.length;i++){
                    alert(oNodes[i].nodeName+","+oNodes[i].value);
                }
            } 
        </script>


    </body>
</html>

海那边的小萌男

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript---DOM模型之DOM树节点的增、删、改、查（一）

玩转DOM模型我们想学好DOM模型，无非就是就是对DOM树的增、删、改、查。所以就来好好学学吧，嘻嘻！一起进步。DOM树节点的查查，有两种方式第一种：直接查，4种常用方法通过getElementById()—通过标签的id属性—（精确查找）拿到单个节点通过getElementsByName()—通过标签的name属性—（条件匹配）拿到集合通过getElementsBy
复制链接

扫一扫