JS元素选择方法

简单总结一下JS中元素获取的API

getElementById

该方法通过id获取element元素，由于文档页面从上往下加载，所以先得有标签然后才能调用getElementById方法。
id是大小写敏感的字符串，传入参数时注意大小写
该API返回的是一个元素对象
使用方法

<div id="time">2022-1-8</div>
<script>
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
</script>

结果如下
在这里插入图片描述

getElementsByTagName

该方法返回的是获取过来元素对象的集合，以伪数组的形式进行存储
即使页面中仅有一个元素，获取的结果依旧是伪数组形式
如果页面中没有所查找的元素，返回的结果为空的伪数组
如果用element.getElementsByTagName(‘标签名’); 父元素必须是指定的单个元素

示例如下

<body>
    <div>

    </div>
    <ul>
        <li>ul.li.1</li>
        <li>ul.li.2</li>
        <li>ul.li.3</li>
        <li>ul.li.4</li>

    </ul>
    <ol id="ol">
        <li>ol.li.1</li>
        <li>ol.li.2</li>
        <li>ol.li.3</li>
        <li>ol.li.4</li>

    </ol>
    <script>
        // 1.该方法返回的是获取过来元素对象的集合，以伪数组的形式进行存储
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        // 2.即使页面中仅有一个元素，获取的结果依旧是伪数组形式
        var revin=document.getElementsByTagName('div');
        console.log(revin);
        // 3.如果页面中没有所查找的元素，返回的结果为空的伪数组
        var revin1 = document.getElementsByTagName('a');
        console.log(revin1);
        // 4.如果用element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // 方法一
        var ol = document.getElementsByTagName('ol'); 
        console.log(ol[0].getElementsByTagName('li'));
        // 方法二
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

运行结果
在这里插入图片描述

getElementsByClassName

getElementsByClassName 根据类名获得某些元素集合

使用方法

<body>
    <div class="box">one</div>
    <div class="box">two</div>
    <div class="box">three</div>
    <div class="text">text</div>
    
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
    </script>
</body>

运行结果
在这里插入图片描述

H5新增方法：querySelector

querySelector 返回指定选择器的第一个元素对象切记里面的选择器需要加符号 .box #nav
querySelectorAll()返回指定选择器的所有元素对象集合

<body>
    <div class="box">one</div>
    <div class="box">two</div>
    <div class="box">three</div>
    <div class="text">text</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 2. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

结果如下
在这里插入图片描述