DOM获取元素

一、ID获取

    <div id="time">2022-11-17</div>

    <script>
        let time =  document.getElementById("time")//返回元素对象
        console.log(time);
        console.log(typeof time);
        //console.dir 打印返回的对象,方便查看里面的属性和方法
        console.dir(time)//打印对象
    </script>

二、根据标签名获取元素

    <script>
        let lis = document.getElementsByTagName('li')//返回元素数组

        // console.log(lis);
        // console.log(lis[0]);

        //遍历数组一次获取里面的元素
        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i]);
            
        }
        //如果页面里面只有一个元素，返回的还是数组形式
        //如果页面没有这个元素，返回空数组

        //getElementByTagName() 获取单个元素
        let ul = getElementByTagName('nav')
        let lis2 = ul.getElementsByTagName('li')
        console.log(lis2);
    </script>

三、H5新增获取元素方式

    <script>
        let boxs = document.getElementsByClassName('box')
        console.log(boxs);

        //document.querySelector //返回指定的第一个元素,选择器需要加符号.box #nav
        let box1 = document.querySelector('.box')
        console.log(box1);

        let div1 = document.querySelector('#nav')
        console.log(div1);

        let li = document.querySelector('li')
        console.log(li);

        //3.document.querySelectorAll()返回指定选择器所有元素的集合
        let boxs2 = document.querySelectorAll('.box')
        console.log(boxs2);
    </script>

四、获取特殊元素（body，html）

    <script>
        //获取body
        let bodyEle = document.body
        console.log(bodyEle);

        //获取html元素
        let htmlEle = document.documentElement
        console.log(htmlEle);
    </script>