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>

运行结果如：

在这里插入图片描述

HTML中获取Dom元素的方法

HTML中获取Dom元素的方法

猜你喜欢