获取元素的方法

最新推荐文章于 2024-04-16 18:09:03 发布

原创最新推荐文章于 2024-04-16 18:09:03 发布 · 323 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了JavaScript中获取页面元素的四种方法：通过ID获取元素、根据标签名获取元素、使用HTML5新增的方法（兼容IE8以上）以及获取特殊元素如body和html。

1.根据id获取

getElementById()

 <body>
    <div id="time">2020-06-09</div> 
    <script>
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //console.dir 打印返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);    
    </script>
 </body>

结果：
在这里插入图片描述

2.根据标签名获取

（1）document.getElementsByTagName()

 <body>
    <ul>
        <li>王也就是道，王也就是理</li>
        <li>王也就是道，王也就是理</li>
        <li>王也就是道，王也就是理</li>
        <li>王也就是道，王也就是理</li>
        <li>王也就是道，王也就是理</li>
    </ul>
    <script>
    //返回的是 获取到的元素对象的集合，以伪数组的形式存储
     var lis = document.getElementsByTagName('li');
     console.log(lis);
    //依次打印出里面的元素对象，我们可以采取遍历的方式
     for(var i = 0; i < lis.length; i++){
         console.log(lis[i]);    
     }    
    </script>
 </body>

结果：
在这里插入图片描述
（2）element.getElementsByTagName

<body>
    <ul>
        <li>王也就是道，王也就是理</li>
        <li>王也就是道，王也就是理</li>
    </ul>
    <ul id="nav">
        <li>阿青就是道</li>
        <li>阿青就是道</li>
        <li>阿青就是道</li>
        <li>阿青就是道</li>
        <li>阿青就是道</li>
    </ul>
    <script>
    
     var nav = document.getElementById('nav');//获得nav这个元素
     var navLis = nav.getElementsByTagName('li');
     console.log(navLis);
     for(var i = 0; i < navLis.length; i++){
         console.log(navLis[i]);    
     }   
    </script>
 </body>

结果：
在这里插入图片描述

3.通过h5新增的方法获取

注：这种方法只兼容ie8以上版本

<body>
     <div class="box">王也</div>
     <div class="box">王也</div>
    <ul>
        <li>王也就是道，王也就是理</li>
        <li>王也就是道，王也就是理</li>
    </ul>
    
    <script>
    //1.根据类名获得某些元素的集合 getElementsByClassName()
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
    //2.querySelector 返回指定选择器的第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        

    </script>
 </body>

结果：
在这里插入图片描述

4.特殊元素获取（body，html）

<body>
     <div class="box">王也</div>
     <div class="box">王也</div>
    <ul>
        <li>王也就是道，王也就是理</li>
        <li>王也就是道，王也就是理</li>
    </ul>
    
    <script>
        //1.获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        //2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
       
    </script>
 </body>