通过ID获取
document.getElementById( '' );
→ 前缀必须是document
通过class获取 （不兼容IE8及以下）
.getElementsByClassName( '' );
因为class不是唯一性，获取到的是个类数组（类似于数组，可以用下标，可以用length）
例：
<div class='box'>1234</div>
<div class='box'>
<p>5474</p>
<p>5474</p>
<p>5474</p>
</div>
<div class='box'>987</div>
var aBox = document.getElementsByClassName ( 'box' );
alert( aBox[ 0 ].innerHTML );
aBox[ 0 ] 获取得到的是类数组，所有要加位置才能找得到；
通过标签名
.getElementsByTagName( '' ); //获取到也是类数组
var aP = aBox[ 1 ].getElementsByTagName( 'p' );
alert( aP[ 1 ].innerHTML );
通过name获取
.getElementsByName( ' ' ); //获取到也是类数组
一般用在表单里
通过选择器 不兼容IE7及以下
.querySelector( ' ' ); //直接得到的单个节点对象
.querySelectorAll( '' ); //得到类数组
例：
<div class='box' >
<span>123</span>
</div>
var oBox = document.querySelector( '.box span' );
alert( oBox.innerTHML );//弹出123
这个性能最差的，相比前面的最少慢10倍以上，尽量少用，只有在复杂度深的时候用
注意：ID获取时，前缀必须是document
其他获取时，前缀可以是某一个节点对象，表明不是从所有对象节点里找，而是指从该节点里找。
例：
var aP = aBox[ 1 ].getElementsByTagName( 'p' );
alert( aP[ 1 ].innerHTML );
获取元素的静动态之分：
静态方法：
获取之后就指定某个对象或者节点了，跟节点的任何变化都没有关系（例之前改变ID）
document.getElementById();
.querySelector();
.querySelectorAll()
动态方法：
获取的变量（类数组），每用一次都会重新去原来的标签重新去获取一次；
.getElementByClassName()
.getElementByTagName() 一般不会去改标签名，可以不用去考虑
.getElementByName()
例：
<div class="box"></div>
<script type="text/javascript">
var aBox = document.getElementsByClassName( 'box' );
aBox[0].className = 'box2';
aBox[0].innerHTML = '11225';
</script>
第二个aBox[0]已没办法去获取到aBox[0],上面已经把class改成box2，类数组是每用一次都会从原来的标签再次获取一次；
解决方法：
var aBox = document.getElementsByClassName( 'box' );
var x = aBox[0];
x.className = 'box2';
x.innerHTML = '11225';
→ 让x指代某个节点，也就是aBox2已经存放在x里了，永远指代原来的aBox2;
测试动态
<div class='box1' ></div>
<div id='box2' ></div>
var x = document.getElementsByClassName( 'box1' );
var oBox2 = document.getElementById( 'box2' );
alert( x.length );====>弹出1；
oBox2.innerHTML ='<p class='box1'></p>'
alert( x.length );====>弹出2；
说明 getElementsByClassName( 'box1' ) 重新获取的；
动态数组变成静态数组
例：
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<script>
var aDiv = document.getElementsByClassName( 'box' );
aDiv[0].className = 'wrap';
alert( aDiv[0].innerHTML );
</script>
这里是弹出2；
image.png
为什么呢？
因为：上面class已经被改了，通过class获取是动态方法，所以aDiv[0].innerHTML的时候会重新再去获取，这里只剩下2和3的盒子有box，所以只能获取到2的
image.png
解决方法
把动态数组变成静态数组
var arrCh = [];
for(var i=0 ; i<aDiv.length ; i++){
arrCh[i] = aDiv[i];//循环一下把原来的分别存放到arrCh里 这时候就变成静态了
}
aDiv[0].className = 'wrap';
alert( arrCh[0].className );
弹出来是1；
image.png
