JS 关于 DOM 操作

1. getElementById（） 根据 ID 获取元素的对象

    <div id="time">2021-01-20</div>
    <script>
        var time = document.getElementById('time')
        console.log(time);              // <div id="time">2021-01-20</div>
        console.log(typeof time);       // object
        console.dir(time)               // 打印元素对象  更好地查看元素的属性和方法
    </script>

2. getElementsByTagName（） 根据标签获取元素

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 伪数组形式存储
        // 如果只有一个元素，也是伪数组
        var list = document.getElementsByTagName('li')
        console.log(list) 
        console.log(list[0]); // 第一个元素对象
    </script>

1. 如果没有对应元素

    <ul>

    </ul>
    <script>
        // 伪数组形式存储
        // 如果只有一个元素，也是伪数组
        var list = document.getElementsByTagName('li')
        console.log(list)  // []
        console.log(list[0]); // 第一个元素对象
    </script>

2.存在多个相同的父元素

    <ol>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ol>
    <ol>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ol>
    <script>
        // 伪数组形式存储
        // 如果只有一个元素，也是伪数组
        var ol = document.getElementsByTagName('ol')
        var list1 = ol.getElementsByTagName('li')      // 报错 ol.getElementsByTagName is not a function
        var list2 = ol[0].getElementsByTagName('li')   
        console.log(list2);  // 打印所有元素
    </script>

3. H5 新增方法：getElementsByClassName（） 根据类名获取元素

    <div class="box1">盒子1</div>
    <div class="box1">盒子1</div>
    <div class="box2">盒子1</div>
    <script>
        console.log(document.getElementsByClassName('box1'));
    </script>

4. H5 新增方法：querySelector（） 根据传递的参数获取元素，但是只能获取第一个元素

    <div class="box1">盒子1</div>
    <div class="box1">盒子2</div>

    <div class="box2">盒子3</div>

    <div id="box3" class="box2">盒子4</div>
    <script>
        // 根据类名
        console.log(document.querySelector('.box1')); // 只能获取第一个元素

        // 根据ID
        console.log(document.querySelector('#box3'));

        // 根据标签
         console.log(document.querySelector('div')); // 只能获取第一个元素
    </script>

5. H5 新增方法：querySelectorAll（）根据传递参数获取所有元素

    <div class="box1">盒子1</div>
    <div class="box1">盒子2</div>

    <div class="box2">盒子3</div>

    <div id="box3" class="box2">盒子4</div>
    <script>
        // 根据类名
        console.log(document.querySelector('.box1')); // 只能获取第一个元素
        console.log(document.querySelectorAll('.box1')); // 获取所有元素

        // 根据ID
        console.log(document.querySelector('#box3'));

        // 根据标签
         console.log(document.querySelector('div')); // 只能获取第一个元素
        console.log(document.querySelectorAll('div')); // 获取所有元素
    </script>

6. 获取 body 元素

    <script>
        var boduEle = document.body
        console.log(boduEle);
    </script>

7、 获取 HTML 元素

    <script>
        var htmlEle = document.documentElement.html
        console.log(htmlEle);
    </script>