Javascript 获取标签元素

co0ker

已于 2023-02-27 19:57:11 修改

阅读量1.1k

点赞数

文章标签：前端 javascript

于 2023-02-27 11:40:10 首次发布

本文链接：https://blog.csdn.net/weixin_57385603/article/details/129238359

版权

Javascript 获取标签有几个方法，无非就是几个方法：

①id ：Id

②标签：Tag

③类：Class

④任意选择器的第一个： Selector

⑤全部：All

⑥整个文档: document

⑦主体：body

由此可以列出方法表格：

方法	说明	返回类型
document.getElementById('id')	通过id(Id)获取	单个对象
document.getElementsByTagName('div')	通过标签名(TagName)获取	返回所有这个标签名的元素的数组
document.getElementsByClassName('class')	通过类名(ClassName)获取	返回所有这个类名元素的数组
document.querySelector("css任意选择器")	通过任意选择器获取，返回第一个	单个对象
document.querySelectorAll("css任意选择器")	返回符合的所有	数组
document.documentElement	获取整个文档(document)元素	单个对象
document.body	获取主体(body)元素	单个对象

值得注意的是，不同的方法返回的有的是单个对象，有的是数组，关键在于这个方法是否唯一，例如id、document和body都是唯一的，而tag、class和all都是属于多数。当使用集合时，需要注意数组的特性。下面利用代码举例实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #byId {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="byId" class="byClass"></div>
    <script>
        // id:Id  标签:Tag  类:Class 任意选择器第一个:Selector 全部:All

        // 返回id名的元素
        document.getElementById('byId').style.background='red'

        // 返回所有这个标签名的元素的集合 获取到的是一个集合，拥有数组的特性
        document.getElementsByTagName('div')[0].style.background='black'

        // 通过classname获取到的也是一个集合
        document.getElementsByClassName('byClass')[0].style.background='yellow'

        // document.querySelector("css任意选择器") 返回第一个,不是集合
        document.querySelector("#byId").style.background='black'
        document.querySelector(".byClass").style.background='black'
        document.querySelector("div").style.background='black'

        // document.querySelectorAll("css任意选择器") 返回符合的所有
        document.querySelectorAll("div")[0].style.background='red'

        // 获取整个文档元素
        document.documentElement.style.background='skyblue'

        //获取body元素
        document.body.style.background='green'

    </script>
</body>
</html>

实现效果如下：