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>
实现效果如下: