通过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