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