# 获取页面元素
## **为什么要获取页面元素（了解）**
  例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作，以下介绍几种常用的获取页面元素的方式。
<br>
## 根据 id 获取元素（掌握）
  使用 getElementById() 方法获取页面元素，获取到的是一个元素对象（注意文档的加载顺序对JS执行的影响），类型为HTMLDivElement，我们也可以查看MDN文档进行API的学习。
**html和css代码**
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用id获取元素</title>
<style>
#box1{
width: 100px;
height: 100px;
background: pink ;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div>盒子2</div>
</body>
</html>
~~~
```
**JavaScript代码**
```
//document:文档对象
//getElementById()
//get 获取 Element 元素 By 根据 Id 标识
<script>
var box = document.getElementById('box1');//这里单单获取这个id并未做改变
document.getElementById('box1').innerText='123456789';//这里将id的内容改为“123456789”
console.log(box);
</script>
```
>[info]由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。
<br>
## **根据标签名获取元素**
   使用 getElementsByTagName() 方法获取页面元素，获取到一个元素集合（伪数组），集合中的元素封装的就是获取到的所有元素，该集合是**动态集合**。
html和css代码
```
<div>hello</div>
<div id="index">world</div>
<div>wolfcode</div>
<p id="p">ppp</p>
<span id="sp1">span html1</span>
<span id="sp2">span html2</span>
```
JavaScript代码
   动态集合会随着页面的加载更新集合中的元素。那如何获取集合中的元素呢？
```
//获取到的类型是一个集合：HTMLCollection 伪数组
var divs = document.getElementsByTagName('div');
//通过遍历获取集合中的元素
for (var i = 0; i < divs.length; i++) {
//元素类型是：HTMLDivElement
var div = divs[i];
console.log(div);
}
```
需求：获取id为container的div里面的所有div元素
```
<div id="container">
<div>aaa</div>
<div>bbb</div>
<p>p html</p>
<span>span html</span>
</div>
<div>hello</div>
<div id="index">world</div>
<div>wolfcode</div>
<p id="p">ppp</p>
<span id="sp1">span html1</span>
```
**注意**
>[info] container中包含了div元素，所以可以使用 getElementsByTagName() 获取其中的div，但是getElementById方法只能通过document对象来调用。
**获取子级元素**
html和css代码
```
~~~
<ul>
<li>li01</li>
<li>li02</li>
</ul>
<ol>
<li>li03</li>
<li>li04</li>
</ol>
~~~
```
JavaScript代码
```
<script>
var myul = document.getElementsByTagName('ul')[0];
var li1 = myul.getElementsByTagName('li');
console.log(li1);
</script>
```
```
var container = document.getElementById('container');
var divs = container.getElementsByTagName('div');
console.log(divs);
// 注意：container中包含了div元素，所以可以使用getElementsByTagName获取其中的div，
// 但是getElementById方法只能通过document对象来调用
```
<br>
## 根据name属性获取元素（熟悉）
html和css代码
```
<div name="boxName">我是一个div1</div>
<div name="boxName">我是一个div2</div>
<div id="boxName">我是一个div3</div>
<div class="boxClass">我是一个div4</div>
<span class="boxClass">我是一个span</span>
```
JavaScript代码
```
// 获取属性名为 'boxName' 的元素
var inputs = document.getElementsByName('boxName');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
```
**注意** 该方法存在浏览器兼容性问题，在IE和Opera中，当id和name属性名字一样时，两种值都能获取到，所以不推荐使用。可查看MDN文档中的兼容性说明。
<br>
## 根据类名获取元素（熟悉）
```
// 根据类名获取元素
var mains = document.getElementsByClassName('boxClass');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
```
注意：该方法存在浏览器兼容性问题，只支持IE9及之后的版本。
<br>
## 根据选择器获取元素（熟悉）
   querySelector：根据指定的选择器，获取第一个匹配的元素。 querySelectorAll：根据指定的选择器，获取所有匹配的元素。
   英文翻译：query（查找），Selector（选择器）
~~~
// querySelector：根据指定的选择器，获取第一个匹配的元素。
// query 查询，查找，Selector 选择器
var text = document.querySelector('#boxName');
console.log(text);
// querySelectorAll：根据指定的选择器，获取所有匹配的元素。
var boxes = document.querySelectorAll('.boxClass');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
// 注意：querySelectorAll是IE8之后才支持
~~~
<br>
## **总结**
>[info] 学习了以上获取元素的方法之后，我们首先要清楚，元素是从document对象中获取出来的对象，元素对应着标签。今天我们先掌握 getElementById() 和 getElementsByTagName() 的使用即可，其他的方法作为了解，以后用到时再查文档。
>[success] 掌握
> getElementById()：根据id获取元素
> getElementsByTagName()：根据标签名获取元素
> getElementsByClassName()：根据class属性（类名）获取元素
> 了解
> getElementsByName()：根据name属性获取元素
> querySelector()：根据选择器获取一个元素
> querySelectorAll()：根据选择器获取所有元素
