• 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);

    输出为:

    好读书,求甚解

  • 相关阅读:
    MySQL数据库优化的八种方式(经典必看)
    HTML5之应用缓存---manifest---缓存使用----HTML5的manifest缓存
    ajax方法总结
    十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less))
    MySQL主从复制技术(纯干货)
    table不能遗露了tbody
    DOM 之selection
    DOM 其他一些特性
    CSSOM视图模式
    DOM 节点实例操作
  • 原文地址:https://www.cnblogs.com/planetwithpig/p/12014793.html
Copyright © 2020-2023  润新知