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