DOM查询

最新推荐文章于 2024-09-01 13:33:34 发布

夹心爱吃果冻

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/weixin_43168302/article/details/118657970

版权

HTML DOM 元素获取节点遍历 JavaScript 属性操作

关键词由CSDN通过智能技术生成

1.通过document对象调用

-getElementById():通过id属性获取一个元素节点对象

-getElementsByTagName():通过标签名获取一组元素节点对象（数组）

-getElementsByName():通过name属性获取一组元素节点对象（数组）

获取元素节点的子节点

2.通过具体的元素节点调用

-getElementByTagName():-方法，返回当前节点的指定标签名后代节点

-childNodes:-属性，表示当前节点的所有子节点

-firstChild:-属性，表示当前节点的第一个子节点

-lastChild:-属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

通过具体的节点调用

-parentNode:-属性，表示当前节点的父节点

-previousSibling:-属性，表示当前节点的第一个兄弟节点

-nextSibling:-属性，表示当前节点的后一个兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    获取元素节点
    1.getElementById():通过id属性获取一个元素节点对象
    2.getElementByTagName():通过标签名获取一组元素节点对象
    3.getElementByName():通过name属性获取一组元素节点对象
    -->
    <div id="total">
        <div class="inner">
            <p>你喜欢哪个城市</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li id="sh">上海</li>
                <li id="dj">东京</li>
                <li id="sr">首尔</li>
            </ul>
            <br>
            <br>
            <p>你喜欢那款单机游戏</p>
            <ul id="game">
                <li id="rl">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>首尔</li>
            </ul>
            <br/>
            <br/>

            <p>你手机的操作系统是</p>
            <ul id="phone">
                <li>IOS</li><li id="android">Android</li>
                <li>Windows phone</li>
            </ul>
        </div>
        <div class="inner">
            gender:
            <input type="radio" name="gender" value="male">Male
            <input type="radio" name="gender" value="femail">Femail
            <br>
            <br>
            name:
            <input type="text" name="name" id="username" value="abcde">
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">查找#bj节点</button></div>
        <div><button id="btn02">查找所有li节点</button></div>
        <div><button id="btn03">查找name=gender的所有节点</button></div>
        <div><button id="btn04">查找#city下所有li节点</button></div>
        <div><button id="btn05">返回#city的所有子节点</button></div>
        <div><button id="btn06">返回#phone的第一个子节点</button></div>
        <div><button id="btn07">查找#bj的父节点</button></div>
        <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
        <div><button id="btn09">返回#username的value属性值</button></div>
        <div><button id="btn10">设置#username的value属性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
    <script>
            /*定义一个函数，专门用来为指定元素绑定单击响应函数
                参数：
                    idStr 要绑定单击响应函数的对象的id属性值
                    fun 事件的回调函数，当单击元素时，该函数将会被触发
             */

            function MyClick(isStr,fun){
                var btn=document.getElementById(isStr);
                btn.onclick=fun
            }



            //为id为btn01的按钮绑定一个单击响应函数
            var btn01=document.getElementById("btn01");
            //单击响应函数
            btn01.onclick=function (){
                //查找#bj节点
                var bj=document.getElementById('bj');
                //innerHtml 通过这个属性可以获取到元素内部的html代码
               alert(bj.innerHTML)
            }

            //为id为btn02的按钮绑定一个单击响应函数
            var btn02=document.getElementById('btn02')
            btn02.onclick=function (){
                //查找所有li节点
                //getElementsByTagName()可以根据标签名来获取一组元素节点对象
                //这个方法会给我们返回一个类数组对象，所有查询的元素都会封装到对象中
                var lis=document.getElementsByTagName('li');
                alert(lis.length)//打印11
                //变量this
                for(var i=0;i<lis.length;i++)
                {
                    alert(lis[i].innerHTML)//打印出所有li里面的内容
                }
            }

            //为id为btn03的按钮绑定一个单击响应函数
            var btn03=document.getElementById('btn03')
            btn03.onclick=function (){
                //查找name=gender的所有节点
                var inputs=document.getElementsByName("gender");
                alert(inputs.length)//打印2
                for(var i=0;i<inputs.length;i++)
                {
                    /*
                    innerHTML用于获取元素内部的html代码的
                     */
                    // alert(inputs[i].innerHTML)不行，打印不出来为空白
                    /*
                       如果需要读取元素节点属性
                       直接使用元素，属性名
                     */
                    alert(inputs[i].value)//打印male和female
                    alert(inputs[i].name)//打印gender，gender
                }

            }
             //查找#city下所有li节点
            var btn04=document.getElementById("btn04");
            btn04.onclick=function (){
                //获取id为city的元素
                var city=document.getElementById("city");
                //查找#city下所有li节点
               var lis= city.getElementsByTagName("li");
               for(var i=0;i<lis.length;i++)
               {
                   var result=lis[i].innerHTML
                   alert(result)
               }
            }
             //返回#city的所有子节点
            /*
                childNodes属性会获取包括文本节点在内的所有节点
                根据DOM标签标签中空白也会当成文本节点
             */
            var btn05=document.getElementById("btn05");
            btn05.onclick=function (){
                var city=document.getElementById("city");
                // var cns=city.childNodes;
                // alert(cns.length)
                // for(var i=0;i<cns.length;i++)
                // {
                //     alert(cns[i].innerHTML)
                // }
                /*
                children属性可以获取当前元素的所有子元素
                 */
                var cns2=city.children;
                alert(cns2.length)

            }

             //返回#phone的第一个子节点
            var btn06=document.getElementById("btn06")
            btn06.onclick=function (){
                var phone=document.getElementById("phone");
                //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
                var fir=phone.firstChild;
                alert(fir)
                //firstElementChild获取当前元素的第一个子元素

            }

             //查找#bj的父节点
            //为id为btn07的按钮绑定一个单击响应函数
             MyClick("btn07",function (){
                //获取id为bj的节点
                 var bj=document.getElementById("bj")
                 var p=bj.parentNode;
                 alert(p.innerHTML)

            })
            //返回#android的前一个兄弟节点
            MyClick("btn08",function (){
                var android=document.getElementById("android");
                var a=android.previousSibling;
                alert(a.innerText)
            })

             //返回#username的value属性值
            MyClick("btn09",function (){
                var username=document.getElementById("username")
                alert(username.value)
            })
             //设置#username的value属性值
            MyClick("btn10",function (){
                var username=document.getElementById("username")
                alert(username.value="asdsdsc")
            })
             //返回#bj的文本值
            MyClick("btn11",function (){
                var bj=document.getElementById("bj");
                alert(bj.innerText)
            })
    </script>
</body>
</html>

在document中有一个属性body，它保存的是body的引用
document.documentElement保存的是html根标签
document.all代表页面中所有的元素
document.querySelector()
  -需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象
  -虽然ie8中没有getElementByClassName()但是可以使用querySelector()代替
  -该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
document.querySelectorAll()
   -该方法和querySelector（）用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
   -即使符合条件的元素只有一个，它也会返回数组

<div class="box1">
    <div>我是box1</div>
    <div></div>
</div>
<script>
    //在document中有一个属性body，它保存的是body的引用
    var body=document.body;
    /*
    document.documentElement保存的是html根标签
     */
    var html=document.documentElement
    /*
    document.all代表页面中所有的元素
     */
    var all=document.all
    console.log(all.length)
    /*
    获取页面中所有的div
     */
    var divs=document.getElementsByTagName("div")
    //获取class为box1中所有的div
    /*.box1 div
    document.querySelector()
      -需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象
      -虽然ie8中没有getElementByClassName()但是可以使用querySelector()代替
      -该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
    */
    var div=document.querySelector(".box1 div")
    /*
    document.querySelectorAll()
       -该方法和querySelector（）用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
       -即使符合条件的元素只有一个，它也会返回数组
     */
    box1=document.querySelectorAll(".box1")
    
</script>

夹心爱吃果冻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM查询

1.通过document对象调用 -getElementById():通过id属性获取一个元素节点对象 -getElementsByTagName():通过标签名获取一组元素节点对象（数组） -getElementsByName():通过name属性获取一组元素节点对象（数组）获取元素节点的子节点2.通过具体的元素节点调用 -getElementByTagName():-方法，返回当前节点的指定标签名后代节点 ...
复制链接

扫一扫