DOM 获取元素

最新推荐文章于 2022-10-19 13:54:17 发布

David_zm

最新推荐文章于 2022-10-19 13:54:17 发布

阅读量115

点赞数

分类专栏：学习记录文章标签： dom

本文链接：https://blog.csdn.net/David_zm/article/details/110938919

版权

学习记录专栏收录该内容

11 篇文章 0 订阅

订阅专栏

获取元素

为什么要获取页面元素？

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。

1. 根据ID获取

语法：document.getElementById(‘id’)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象或 null

案例代码

<body>
    <div id="time">2020-12-9</div>
    <script>
        // 因为页面是从上往下进行解析 所有我们要先有标签 所以script标签写到下面
        var timer = document.getElementById('time'); //获取元素
        console.log(timer); // 打印查看
        console.log(typeof timer); // 查看类型
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

返回结果

2. 根据标签名获取元素

语法：document.getElementsByTagName(‘标签名’) 或者element.getElementsByTagName(‘标签名’)
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

案例代码

<body>
    <ul>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
    </ul>
    <ul id="nav">
        <li>abcdef</li>
        <li>abcdef</li>
        <li>abcdef</li>
        <li>abcdef</li>
        <li>abcdef</li>
    </ul>
    <script>
        // 获取元素的对象集合
        var lis = document.getElementsByTagName('li');
        // 我们可以通过遍历依次获取里面的元素
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }

        var nav = document.getElementById('nav'); // 获取nav 元素
        var navLis = nav.getElementsByTagName('li'); // 获取nav 里的li
    </script>
</body>

可以自己进行打印输出查看一下结果

注意： 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要进行遍历

3. H5新增获取元素方式

（1） document.getElementsByClassName(‘类名’) // 根据类名返回元素对象集合

语法：document.getElementsByClassName(‘类名’)
作用：根据类名获取元素对象
参数：类名
返回值：元素对象集合（伪数组，数组元素是元素对象）

获取类名的方式和上面获取标签的方式的返回值都是元素对象集合使用时都需要遍历
（2）document.querySelector(‘选择器’) // 根据指定选择器返回第一个元素对象（推荐使用）

语法：document.querySelector(‘选择器’)
作用：根据选择器获取元素对象
参数：选择器
返回值：元素对象或 null

案例代码

<body>
    <div></div>
    <div class="one"></div>
    <div class="one" id="two"></div>
    <div class="one"></div>
    <div class="one"></div>
    <script>
        var div = document.querySelector('div')
        var div = document.querySelector('.one')
        var div = document.querySelector('#two')
    </script>
</body>