HTML中获取Dom元素的方法

亦凉 2022-01-27 01:27 675阅读 0赞

## HTML中获取Dom元素的方法 ##

1.getElementsByTagName()方法：获取标签，获取的值是一个数组形式；然后再通过数组下标来准确得到自己想要的值

//getElementsByTagName  获取标签方法 获取的值是一个数组形式
            //通过索引下标获取第一个li  定义变量接收
            const xx = document.getElementsByTagName("li")[0];
            //打印结果
            console.log(xx);

**通过索引下标取值的方法不直观 因为以后数据都是从后台动态获取，前台动态生成添加**

2.querySelector()方法： 选择器查询 querySelector(传入的选择器名称 也可以是标签 )，如果参数是标签，其元素值不止一个的话；那么只会返回满足条件的第一个元素值 例如：

var pp=document.querySelector("li") ;

传入的参数：如果是类选择器，必须添加" .";如果是id选择器，必须添加" \# ";否则会被当成标签来处理

var pp=document.querySelector(".fous") ; //通过类名准确选择所需要的元素
            console.log(pp);

3。querySelectorAll()方法：与getElementsByTagName()方法有点类似；获取满足条件的所有元素—数组形式 ；通过索引下标方式来获取想要得到的值

var rr=document.querySelectorAll("li");
            var xpr=document.querySelectorAll("li")[2];
            console.log(rr);
            console.log(xpr);

**针对这几个方法，做了一个小小的例子，供参考**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li class="one">JAVA</li>
        <li class="two">C++</li>
        <li class="three">HTML</li>
        <li class="fous">PHP</li>
    </ul>
    
    <script>
    
        window.onload=function () {
            //getElementsByTagName  获取标签方法 获取的值是一个数组形式
            //通过索引下标获取第一个li  定义变量接收
            const xx = document.getElementsByTagName("li")[0];
            //打印结果
            console.log(xx);
    
        //  通过索引下标取值的方法不直观  因为以后数据都是从后台动态获取，前台动态生成添加
    
            //querySelector  选择器查询   querySelector(传入的选择器名称 也可以是标签 )
            //var pp=document.querySelector("li") ;
            //querySelector  获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素
    
            //传入的参数要求：如果是类选择器，必须添加" .";如果是id选择器，必须添加" # ";否则会被当成标签来处理
    
    
        // querySelectorAll   获取满足条件的所有元素---数组形式
        //  通过索引下标方式来获取想要得到的值
            var rr=document.querySelectorAll("li");
            var xpr=document.querySelectorAll("li")[2];
            console.log(rr);
            console.log(xpr);
        }
    </script>
    </body>
    </html>

运行结果如：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTk5ODE5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTk5ODE5_size_16_color_FFFFFF_t_70]: /images/20220127/12d035fbb2c5433a9c2732400256d578.png