一、通過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>
直接能獲取到這個元素。
二、通過標(biāo)簽名元素（一次多個元素）
通過標(biāo)簽名獲?。?/p>
document.getElementsByTagName("標(biāo)簽名");
例子：文章來源：http://www.zghlxwxcb.cn/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標(biāo)簽元素，得到的是一個HTMLCollection數(shù)組，元素集合，然后去集合的第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的標(biāo)簽元素，得到的是一個HTMLCollection數(shù)組，元素集合，然后去集合的第0項，也就是第一個calss名稱為Liuqing的元素。
四、querySelector(獲取第一個匹配成功的元素)
用法：
document.querySelector('類名（需要加.）|| id（需要加 #）||標(biāo)簽名')
注意：
獲取第一個匹配成功的元素
例子：
<!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（需要加 #）||標(biāo)簽名')
注意：
獲取所有匹配成功的元素
例子：
<!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內(nèi)容
</span>
</div>
<div class="Liuqing">
<span class="smallSpan">
span內(nèi)容
</span>
</div>
<script>
var Liuqing = document.querySelectorAll('.Liuqing .smallSpan')
console.log(Liuqing, 'Liuqing')
</script>
</body>
</html>
document.querySelectorAll中可以寫選擇樣式，css中怎么寫，這里就可以怎么寫。文章來源地址http://www.zghlxwxcb.cn/news/detail-789197.html
到了這里，關(guān)于前端基礎(chǔ)(七)_DOM元素獲?。╣etElementById、getElementsByTagName、getElementsByClassName、querySelector等）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
