1、getElementById(“元素的id名字”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="container"></div>
</body>
<script>
let con = document.getElementById("container");
</script>
</html>
显示结果:
2、getElementsByClassName(“元素的类名”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class = "container">1</div>
<div class = "container">2</div>
<div class = "container">3</div>
</body>
<script>
let con = document.getElementsByClassName("container");
</script>
</html>
显示结果:
可以注意到这里是Elements,可见不止一个。
由图可知,通过类名获取的是一个数组,可通过下标访问。
3、getElementsByTagName(“元素标签的名字”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class = "container">1</div>
<div class = "container">2</div>
<div class = "container">3</div>
<p>4</p>
</body>
<script>
let div = document.getElementsByTagName("div");
let p = document.getElementsByTagName("p");
</script>
</html>
结果显示:
这个和getElementsByClassName(),类似返回都是一个数组。
4、选择器
(1)querySelector();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="content" class = "container">1</div>
<div class = "container">2</div>
<div class = "container">3</div>
</body>
<script>
let content = document.querySelector("#content");
let con = document.querySelector(".container");
</script>
</html>
结果显示:
这里需要注意的是,
①通过id名获取的时候需要 “#”+“id名” ;
通过类名获取时需要用 “.”+“类名”
②并且无论元素多少,只会返回第一个。
(2)querySelectorAll();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="content" class = "container">1</div>
<div class = "container">2</div>
<div class = "container">3</div>
</body>
<script>
let content = document.querySelector("#content");
let con = document.querySelectorAll(".container");
</script>
</html>
结果显示:
当元素有多个时,使用该方法可以获得一个NodeList数组,可通过下标访问。