JS选择器
一 概念
#### 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>
