DOM基础之获取元素
1.获取元素
获取元素就是获取元素节点，注意不是属性节点或文本节点，这跟CSS选择器相似，只不过选择器是CSS的操作方式，而JavaScript却有着属于自己的另一套方法。
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelector()和querySelectorAll()
getElementsByName()
document.title 和document.body
1.1对于getElementById()
语法：document.getElementById("id名")
分析：
window.οnlοad=function()
{
....
}
这个是表示在整个页面加载完成后执行的代码块。我们都知道，浏览器是自上而下解析一个页面的。这个例子的JavaScript代码在HTML代码的上面，如果没有window.onload.浏览器解析到document.getElementById()就会报错，因为他不知道括号里的id参数的元素究竟是哪位兄弟。
2.
语法：getElementsByTagName("标签名")
注意：其中的Elements是复数，因为该方法获取的是多个元素即集合。
举例：
```
<!!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
var oUi=document.getElementById("list");
var oLi=oUi.getElementsByTagName("li");
oLi[2].style.color="red";
}
</script>
</head>
<body>
<u1 id="list"></u>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>Vue.js</li>
</body>
</html>
```运行结果
分析：
var oU1=document.getElementById("list");
var oLi=oU1.getElemetsByTagName("li");
在上面的代码中，首先使用getElementById()方法获取id为list的u1元素，然后用getElementsByTagName()方法获取u1元素下的所有li元素。若是用下面代码代替可以嘛
var oLi=document.getElementsByTagName("li");
事实上，这是不一样的。document.getElementsByTagName("li")获取的是"整个HTML页面"所有的li元素，而oU1.getElementsByTagName("li")获取的仅仅是”id为list的u1元素"下所有的li元素。
其中getElementsByTagNam()方法获取的是一个类数组（伪数组）。类数组只能用到两点：1，length属性；2,下标形式 但是这里对于push()等方法是没办法在这里用的。
举例
```
<!!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
var arr=["HTML","CSS","JavaScript","Jquery","Vue.js"];
var oU1=document.getElementById("list");
var oLi=document.getElementsByTagName("li");
for(var i=0;i<oLi.length;i++)
{
oLi[i].innerHTML=arr[i];
oLi[i].style.color="red";
}
}
</script>
</head>
<body>
<u1 id="list"></u>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
</html>
``````
分析
：
oLi表示获取类数组oLi的长度，有多少个元素，长度就是多少
oLi[i].innerHTML=arr[i];表示设置li元素中的内容为对应下标的数组arr中的元素.innerHTML后面会学
实例
```
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
document.body.innerHTML="<input type='button'
value='按钮' /><input type='button' value='按钮'/><input type='button'
value='按钮'/>"
var oBtn=document.getElementsByTagName("input");
oBtn[0].οnclick=function()
{
alert("表单元素共有:"+oBtn.length+"个");
};
}
</script>
</head>
<body>
</body>
</html>
```
分析：
“document.body.innerHTML=......"表示动态为body元素添加DOM元素。”oBtn[0].οnclick=function(){......}"表示为第一个按钮添加点击事件。从这个例子可以看出，getElementsByTagName()方法可以操作动态创建的DOM元素。但是使用getElementById(）就无法实现了，下面说说这两个方法的明显的区别
1 getElenmentById()获取的是一个元素，而getElementsByTagName()获取的是多个元素（伪数组）
2 getElementById()前面只可以接document,也就是document.getElementById();
3 getElementById()不可以操作动态创建的DOM元素，而getElementsByTagName()可以操作动态创建的DOM元素。
3.getElementsByClassName()
在JavaScript中，如果想通过class来选中元素，我们可以使用getElementsByClassName()方法来实现。即通过类名获取元素。
语法：
document.getElementsByClassName("类名")
说明：
此方法获取的是一个类数组，和getElementsByTagName相似
此方法不能操作动态DOM。
举例：
```
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.onload=function()
{
var
oLi=document.getElementsByClassName("select");
oLi[0].style.color="red";
}
</script>
</head>
<body>
<ul id="list">
<li> HTML</li>
<li>CSS</li>
<li class="select">JavaScript</li>
<li class="select">jQuery</li>
<li class="select">Vue.js</li>
</ul>
</body>
</html>
``` 4 querySelector()和querySelectorAll()
这两个方法使我们可以使用CSS选择器的语法来获取所需要的元素
语法：
document.querySelector("选择器");
document.queruSelectorAll("选择器");
querySelector()表示选取满足条件的第一个元素，querySelectorAll()表示选取满足条件的所有元素。
对于id选择器来说，由于页面只有一个元素，最好使用getElementById(),而不是querySelector()或querySelectorAll().因为getElementById(）方法效率更高。
举例：
```
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
var oDiv=document.querySelectorAll(".test");
oDiv[1].style.color="red";
}
</script>
</head>
<body>
<div>绿叶学习网</div>
<div class="test">绿叶学习网</div>
<div class="test">绿叶学习网</div>
<div>绿叶学习网</div>
<div class="test">绿叶学习网</div>
</body>
</html>
```
分析：
document.querySelectorAll(".test")表示获取所有class为test的元素。也是一个类数组，所以要想精确的获得某一个元素，也需要使用数组下标的形式获取。
#list li:nth-child(3)
分析：表示选取id为list的元素下的第三个元素，“nth-child(n)"属于CSS3的选择器。事实上，也可以使用document.querySelectorAll("#list li:nth-child(3)")[0]来实现，两者效果一样，特别需要注意的是querySelectorAll()方法得到的是一个类数组，即使你获取的只有一个元素，也必须使用下标"[0]"才可以正确获取。
5 getElementsByName()
对于表单元素来说，他有一个普通元素没有的name属性。我们可以用getElenmentsByName()方法使用用name属性来获取表单元素。
语法：
document.getElementsByName("name名")
说明：该方法获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标形式来获取。
她只用于表单元素，一般只用于单选按钮和复选框。
实例：
```
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
var oInput=document.getElementsByName("fruit");
for(var i=0;i<oInput.length;i++)
{
oInput[2].checked=true;
}
}
</script>
</head>
<body>
你喜欢的水果:
<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
</body>
</html>
```分析：
oInput[i].checked=true;表示将类数组中的下标为i的checked属性设置为true，也就是这个按钮被选中
6 document.title和document.body
由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门为我们提供了两个非常方便的方法：document.title和document.body
```
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
document.title="绿叶学习网";
document.body.innerHTML="<strong style='color:
red'>欢迎来到绿叶学习网</strong>"
}
</script>
</head>
<body>
</body>
</html>
```
