获取节点其他方法
概述：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>
```
