# 獲取頁面元素
## **為什么要獲取頁面元素（了解）**
  例如：我們想要操作頁面上的某部分(顯示/隱藏，動畫)，需要先獲取到該部分對應的元素，才進行后續操作，以下介紹幾種常用的獲取頁面元素的方式。
<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()：根據選擇器獲取所有元素
