1：根据ID获取元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>
<body>
    <div id="time">2020- 2 -18</div>
    <script>
        var timer = document.getElementById("time");
        console.log(timer)
        console.log(typeof timer)
        console.dir(timer)
    </script>
</body>
</html>

console.log(typeof timer) 得到一个object 对象。
01:DOM获取元素_其他
2：根据标签名获取元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>
<body>
    <ul>
        <li>我最帅1</li>
        <li>我最帅2</li>
        <li>我最帅3</li>
        <li>我最帅4</li>
        <li>我最帅5</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li")
        console.log(lis)
        // 获取第几个元素
        console.log(lis[0])
        console.log(lis[1])
        // 遍历？
        for(var i = 0 ; i < lis.length ; i++){
            console.log(lis[i])
        }
    </script>
</body>
</html>

01:DOM获取元素_选择器_02
问题：如果再添加一组ul li 而我只想要下面的，如何去做呢？
思路：先用id获取下面的ul ，然后再用标签名获取下面的全部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>
<body>
    <ul>
        <li>我最帅1</li>
        <li>我最帅2</li>
        <li>我最帅3</li>
        <li>我最帅4</li>
        <li>我最帅5</li>
    </ul>
    <ul id="nav">
        <li>...我最帅1</li>
        <li>...我最帅2</li>
        <li>...我最帅3</li>
        <li>...我最帅4</li>
        <li>...我最帅5</li>
    </ul>
    <script>
        var nav = document.getElementById("nav")
        var lis = nav.getElementsByTagName("li")
        for (var i = 0 ; i < lis.length ; i++){
            console.log(lis[i])
        }
    </script>
</body>
</html>

01:DOM获取元素_选择器_03
3：HTML5 新增的方法：class获取。IE5以上版本才可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>
<body>
    <div class="box">首页</div>
    <div class="box">产品</div>
    <div id="nnn">1111</div>
    <div id="nnn">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
    </div>

    <script>
        // 1:根据getElementsByClassName 根据类名获取某些元素的集合
        var lis = document.getElementsByClassName("box");
        for(var i = 0 ; i < lis.length ; i++){
            console.log(lis[i]);
        }
        //2:queryselector ：返回指定选择器的第一个元素。
        var firstbox = document.querySelector(".box");
        console.log(firstbox);
        // 前面是.就是类选择器，前面是# 就是id选择器
        var nnn = document.querySelector("#nnn");
        console.log(nnn);

        var aaa = document.querySelector("li");
        console.log(aaa);
        //queryselectAll :返回指定选择器所有元素的和
        var allbox = document.querySelectorAll(".box");
        for(var i = 0 ; i < allbox.length ; i++){
            console.log(allbox[i]);
        }
    </script>
</body>
</html>

01:DOM获取元素_其他_04
4:获取特殊元素：
获取body元素和获取html元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>
<body>
    <script>
       // 1:获取我的body元素
       var bodyEle = document.body;
       console.log(bodyEle);
       //检测获取到的body元素属性:返回的是元素。
       console.dir(bodyEle);

       //2：获取我的HTML元素
        var htmlele = document.documentElement;
        console.log(htmlele);
        console.dir(htmlele);
    </script>
</body>
</html>

01:DOM获取元素_i++_05