獲取節點其他方法
概述：DOM對象給我們提供很多方法去獲取節點。方法如下：
```
getElementById:通過節點ID屬性值獲取標簽
```
```
getElementsByTagName:通過標簽名字獲取節點。這個方法給我返回是是一個數組。數組里面的元素為節點。
```
```
getElementsByClassName:通過標簽的calss屬性值獲取相對應節點，這個方法給我們返回數組數組里的元素也是節點。
```
```
querySelector:可以通過任意的選擇器獲取節點。
```
### 注意：：getElementsByTagName方法通過標簽的名字獲取全部節點
### 這個方法返回的是一個數組【數組里元素才是節點】
###
### 標簽才可以設置樣式，數組不能設置的。
### 不管嵌套多深，所有標簽都一下子設置上。
getElementsByTagName方法把所有li標簽文字顏色設置為紅色
代碼：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
</ul>
<div>
<ul>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
<li>你好呀剛開始研究</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var li=document.getElementsByTagName("li") //返回一個數組
for(var i=0;i<li.length;i++){
li[i].style.color="red";
}
</script>
```
<h3><p style="color:red">getElementsByClassName方法通過class屬性名稱進行匹配
（注意此方法是通過class屬性值名稱匹配的）
getElementsByClassName方法匹配所有class屬性名為cur的文字內容變為紅色</p></h3>
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="cur">你好呀</p>
<p class="cur">你好呀</p>
<p class="cur">你好呀</p>
<p >你好呀</p>
</body>
</html>
<script type="text/javascript">
var cur=document.getElementsByClassName("cur") //獲取所有class屬性名稱是cur的返回一個數組
for(var i=0;i<cur.length;i++){
cur[i].style.color="red";
}
</script>
```
###
### querySelector: 通過任意選擇器【標簽選擇器，ID選擇器，class選擇器，并集選擇器，交集選擇器等等選擇節點】獲取某一個節點。
###
### 如果多個符合從程序的從上到下第一個匹配
querySelector代碼如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>你好呀</p>
<p>你好呀</p>
<p>你好呀</p>
<p>你好呀</p>
<p>你好呀</p>
</body>
</html>
<script type="text/javascript">
var ab=document.querySelector("p"); //選擇P標簽的第一個元素
ab.style.color="red";
</script>
```
