js新增获取元素节点的方法细微差别

js新增获取元素节点的方法细微差别

一.getElementsByClassName

    <ul class="header">
        <li>节目1</li>
        <li>节目2</li>
    </ul>

需要注意的getElementsByClassName是返回文档中所有指定类名的元素集合，以数组的形式呈现，我们要想得到ul中的两个小li必须这么写

        var header = document.getElementsByClassName('header');
        console.log(header);

        var lis = header[0].getElementsByTagName('li');
        //var lis = header.getElementsByTagName('li');会报错
        console.log(lis);

----------------------------------------------------------------------------------------------------

二…querySelector（‘选择器’）
根据指定选择器返回第一个元素对象！！！！第一个！！！
所以获取ul中的两个小li时可以这么写：

        var header = document.querySelector('#header')
        console.log(header);

        var lis = header.getElementsByTagName('li');
        //此处不用header【0】
        console.log(lis);

----------------------------------------------------------------------------------------------------

三.getElementById 由于id跟类名不一样是独一无二的，所以也只返回一个

        var header = document.getElementById('header')
        console.log(header);

        var lis = header.getElementsByTagName('li');
        console.log(lis);