DOM基础，获取元素，事件基础，操作元素

最新推荐文章于 2022-07-02 00:57:17 发布

chang _an

最新推荐文章于 2022-07-02 00:57:17 发布

阅读量167

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_50613702/article/details/108926492

版权

获取元素，事件基础，操作元素

一. 获取元素

1.1根据ID获取

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

案例代码

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

1.2根据标签名获取元素

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

案例代码

<body>
    <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久22</li>
        <li>知否知否，应是等你好久33</li>
        <li>知否知否，应是等你好久44</li>
        <li>知否知否，应是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
   
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意事项：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
得到元素对象是动态的。
getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

1.3H5新增获取元素方式

1.document.getElementsByClassName('类名'); // 根据类名返回元素对象集合

2.document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

3.document.querySelectorAll('选择器'); // 根据指定选择器返回

注意事项：

querySelector 和 querySelectorAll 里面的选择器需要加符号，例如：

document.querySelector('#nav');

案例代码

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box')</

最低0.47元/天解锁文章

chang _an

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础，获取元素，事件基础，操作元素

获取元素，事件基础，操作元素一. 获取元素1.1根据ID获取语法：document.getElementById(id)作用：根据ID获取元素对象参数：id值，区分大小写的字符串返回值：元素对象或 null案例代码<body> <div id="time">2019-9-9</div> <script> // 因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面 v
复制链接

扫一扫