3 获取元素

3.1 根据 ID 获取

• 使用 getElementById() 方法可以获取带有 ID 的元素对象

    document.getElementById('id');
  

• 使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法

    <div id="time">2022-2-22</div>
    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
  

3.2 根据标签名获取

• 使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合

    document.getElementsByTagName('标签名');
  

• 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历

• 得到元素对象是动态的

    <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>
  
    </ul>
  
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
  
    </ol>
  
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
  
        }
        // 3. 如果页面中只有一个li 返回的还是伪数组的形式 
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // [ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
  

3.3 通过 HTML5 新增的方法获取

• 使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合

    1. document.getElementsByClassName('类名')；// 根据类名返回元素对象集合
    2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
    3. document.querySelectorAll('选择器'); // 根据指定选择器返回
  

• querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. 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);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
  

3.4 特殊元素获取

• 获取body元素

    document.body // 返回body元素对象
  

• 获取html元素

    document.documentElement // 返回html元素对象