js学习 --dom获取元素的四种方法

获取元素的四种方法

 <div id="test" >2020.5.21</div>
    <script>
        //通过id 获取元素 get 获得 element 元素 by 通过 document 文档
        let tests=document.getElementById("test");
        console.log(tests);
        //更好的查看里面的方法和元素
        console.dir(tests);


    </script>

    通过标签名获取
    有序
    <ol>
        <li>锄禾日当午1</li>
        <li>锄禾日当午2</li>
        <li>锄禾日当午3</li>
        <li>锄禾日当午4</li>
    </ol>
    无序
    <ul id="u1">
        <li>锄禾日当午4</li>
        <li>锄禾日当午2</li>
        <li>锄禾日当午3</li>
        <li>锄禾日当午4</li>
    </ul>
    <script>
       let  l1=document.getElementsByTagName("li");
       console.log(l1);
      let l2= document.getElementById("u1");
       let l21=l2.getElementsByTagName("li");
       console.log(l21);
    </script>

   html5新增方法获取
    <div class="sss">hello </div>
    <ul id="ss">
        <li>产品</li>
        <li>名字</li>
    </ul>
   <script>
       //id以#开头，class以. 开头
       let q1= document.querySelector("#id");
       let q2=document.querySelector(".sss")
       console.log(q1+q2);
   </script>

   <script>
       //获取body
       document.body;
       //获取html
       document.documentElement;
   </script>