首先先了解一个词:DOM(Document Object Model),文档对象类型。顾名思义,DOM就是个对象,里面存着好多属性值,因此就可以通过它的方法来获取元素了。
(1)通过id:getElementById("id名")
(2)通过Class:getElementsByClassName("class名")
(3)通过标签名:getElementsByTagName("标签名")
(4)通过name:getElementsByName("name")
(5)通过选择器,获取一个元素:querySelector("选择器")
(6)通过选择器,获取一组元素:querySelectorAll("选择器")
代码举例:
<!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>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: skyblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="div1" id="div1">1</div>
<div class="div1">2</div>
<input type="radio" name="justify" />对
<input type="radio" name="justify" />错
<input type="radio" name="justify" />不确定
<script>
// 通过id获取div1
var div1 = document.getElementById("div1");
console.log(div1);
// 通过class名获取class=div1的元素
var div = document.getElementsByClassName("div1");
console.log(div);
// 通过标签名获取所有div
var divTagName = document.getElementsByTagName("div");
console.log(divTagName);
// 获取name=justify的所有元素
var inputName = document.getElementsByName("justify");
console.log(inputName);
// 通过id选择器获取元素
var divSelector = document.querySelector("#div1");
console.log(divSelector);
// 通过选择器获取第二个div
var divSec = document.querySelector("div:nth-child(2)");
console.log(divSec);
// 通过选择器获取所有div
var divSelectorAll = document.querySelectorAll("div");
console.log(divSelectorAll);
</script>
</body>
</html>
运行结果:
分析输出结果会发现,当时Elements的时候获取到的元素是一个数组,而其他属性可以重名,而id属性不能重名,所以对于前四个来说,只有通过id获取的时才会获得的是一个元素,其他的即使是一个元素也会是个数组。