document.getElementsByTagName()方法的返回值

在閱讀《JS DOM 編程一書》一書時，看到getElementByTagName函數返回值為數組，然后自己驗證了下，發現不是數組，而是一個可遍歷的HTMLCollection對象

HTML:

    <h1>需要買什么</h1>
    <p>不要忘記買以下東西</p>
    <ul id='purchase'>
        <li>香蕉</li>
        <li>蘋果</li>
        <li>桃子</li>
    </ul>
    <div>這是你要買的東西</div>
    <div id='hello'>你好</div>
    <div id="info"></div>    

JS:

window.onload=function(){
        var divs=document.getElementsByTagName('div');
        console.log(divs);
        console.log(typeof divs);    //object
        console.log(divs instanceof Array);//返回false

        //由此可見，getElementsByTagName方法，返回的不是一個Array
        //而是一個dom對象，可以遍歷

        var info=document.getElementById('info');
        info.innerHTML=Object.prototype.toString.call(divs);

    }

控制台顯示結果如下：

geteLElementsByTagName()返回值可使用for循環進行遍歷，且集合內是一個一個的對象。以上面的例子為例

for(var i=0;i<divs.length;i++){
  　　console.log(divs[i]);
　　　console.log(typeof divs[i]);
}

控制台輸出為：

 

 那么如何獲取HTMLCollection對象中的對象呢

方式一：通過index獲取，繼續上面的栗子

var div1=divs[0];
console.log(div1);
console.log(typeof div1);

輸出：

 

 方式二：通過["id"]獲取

var hdiv=divs["hello"];
console.log(hdiv);
console.log(typeof hdiv);

輸出為：

 

 

好讀書，求甚解