一 概念
#### 1、getElement系列 ```js // 1.通過id名獲取唯一滿足條件的頁面元素 document.getElementById('id名'); // 該方法只能由document調用 // 2、通過class名獲取所有滿足條件的頁面元素 document.getElementsByClassName('class名'); // 該方法可以由document及任意頁面元素對象調用 // 返回值為HTMLCollection (一個類數組結果的對象，使用方式同數組) // 沒有匹配到任何結果返回空HTMLCollection對象 ([]) // 3.通過tag名獲取所有滿足條件的頁面元素 document.getElementsByTagName('tag名'); // 該方法可以由document及任意頁面元素對象調用 // 返回值為HTMLCollection (一個類數組結果的對象，使用方式同數組) // 沒有匹配到任何結果返回空HTMLCollection對象 ([]) ``` #### 2、querySelect系列 ```js // 1.獲取第一個匹配到的頁面元素 document.querySelector('css語法選擇器'); // 該方法可以由document及任意頁面對象調用 // 2.獲取所有匹配到的頁面元素 document.querySelectorAll('css語法選擇器'); // 該方法可以由document及任意頁面對象調用 // 返回值為NodeList (一個類數組結果的對象，使用方式同數組) // 沒有匹配到任何結果返回空NodeList對象 ([]) ``` #### 3、id名 - 可以通過id名直接獲取對應的頁面元素對象，但是不建議使用 二 代碼示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js選擇器</title>
<style type="text/css">
/*css選擇器*/
#d {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="d" class="dd">123</div>
<div id="d" class="dd">123</div>
<div id="e1" class="ee">123</div>
<div id="e2" class="ee">123</div>
<div id="e3" class="ee">123</div>
</body>
<script type="text/javascript">
// 1.直接可以通過id名,確定頁面元素對象(id一定要唯一)
// d.style.color = "cyan";
// 2.getElement方式
// document:所有標簽都存在於文檔中,所有通過document對象就可以找到指定的頁面元素對象
// id
var d1 = document.getElementById('d');
d1.style.backgroundColor = "pink";
// class
var d2 = document.getElementsByClassName('dd');
console.log(d2); // HTMLCollection 類數組類型
console.log(d2[0].style);
d2[0].style.backgroundColor = "cyan";
d2[1].style.backgroundColor = "blue";
// tagName
var d3 = document.getElementsByTagName('div');
d3[1].style.backgroundColor = "#333";
// 注:只有getElementById只能由document調用
var body = document.getElementsByTagName('body')[0];
body.style.backgroundColor = "#eee";
var d4 = body.getElementsByClassName('dd')[0];
d4.style.backgroundColor = "orange";
var d5 = body.getElementsByTagName('div')[1];
d5.style.backgroundColor = "brown";
</script>
<script type="text/javascript">
// 參數為css語法的選擇器
// 找滿足條件的第一個
// 可以被document調用,也可以被普通對象調用
var e1 = document.querySelector('#e1'); // id為e1的標簽,唯一一個
e1.style.backgroundColor = "#f7f";
var e2 = document.querySelector('body .ee'); // body標簽下的class為ee的 第一個標簽
e2.style.backgroundColor = "#ff6700";
var e3 = document.querySelector('body .ee:nth-of-type(5)');
console.log(e3)
e3.style.backgroundColor = "#ff6700";
// 找滿足條件的所有
var es = document.querySelectorAll('.ee');
console.log(es); // NodeList
es[1].style.backgroundColor = "tomato";
</script>
</html>