一、通过id获取元素(一次一个元素)
一个id在一个页面是唯一的,所以我们可以使用
document.getElementById("id名")
获取元素,使用变量来接收,直接就能获取到这个元素,通过 id 名去获取元素,一次只能获取一个元素。
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<script>
var box = document.getElementById('box')
console.log(box)
</script>
</body>
</html>
直接能获取到这个元素。
二、通过标签名元素(一次多个元素)
通过标签名获取:
document.getElementsByTagName("标签名");
例子:文章来源:https://www.toymoban.com/news/detail-789197.html
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<div class="Liuqing">Liuqing1</div>
<div class="Liuqing">Liuqing2</div>
<script>
var box = document.getElementById('box')
console.log(box)
var Liuqing = document.getElementsByTagName('div')
console.log(Liuqing, 'Liuqing')
console.log(Liuqing[0], 'Liuqing[0]')
</script>
</body>
</html>
通过
var Liuqing = document.getElementsByTagName('div')
获取所有div标签元素,得到的是一个HTMLCollection数组,元素集合,然后去集合的第0项,也就是id名为box的元素。
三、通过类名元素(一次多个元素)
通过类名获取:
document.getElementsByClassName("类名");
例子:
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<div class="Liuqing">Liuqing1</div>
<div class="Liuqing">Liuqing2</div>
<script>
var box = document.getElementById('box')
console.log(box)
var Liuqing = document.getElementsByClassName('Liuqing')
console.log(Liuqing, 'Liuqing')
console.log(Liuqing[0], 'Liuqing[0]')
</script>
</body>
</html>
通过
var Liuqing = document.getElementsByClassName('Liuqing')
获取所有class名称为Liuqing的标签元素,得到的是一个HTMLCollection数组,元素集合,然后去集合的第0项,也就是第一个calss名称为Liuqing的元素。
四、querySelector(获取第一个匹配成功的元素)
用法:
document.querySelector('类名(需要加.)|| id(需要加 #)||标签名')
注意:
获取第一个匹配成功的元素
例子:
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<div class="Liuqing">Liuqing1</div>
<div class="Liuqing Liuqing2">Liuqing2</div>
<script>
var box = document.getElementById('box')
console.log(box)
var Liuqing1 = document.querySelector('.Liuqing')
console.log(Liuqing1, 'Liuqing1')
var Liuqing2 = document.querySelector('.Liuqing2')
console.log(Liuqing2, 'Liuqing2')
</script>
</body>
</html>
五、querySelectorAll(获取所有匹配成功的元素)
用法:
document.querySelector('类名(需要加.)|| id(需要加 #)||标签名')
注意:
获取所有匹配成功的元素
例子:
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="Liuqing">
<span class="smallSpan">
span内容
</span>
</div>
<div class="Liuqing">
<span class="smallSpan">
span内容
</span>
</div>
<script>
var Liuqing = document.querySelectorAll('.Liuqing .smallSpan')
console.log(Liuqing, 'Liuqing')
</script>
</body>
</html>
document.querySelectorAll中可以写选择样式,css中怎么写,这里就可以怎么写。文章来源地址https://www.toymoban.com/news/detail-789197.html
到了这里,关于前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!