3、获取元素

最新推荐文章于 2024-01-30 13:00:10 发布

是瑞瑞小甜心

最新推荐文章于 2024-01-30 13:00:10 发布

阅读量905

点赞数

分类专栏： WebAPI 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_45998542/article/details/121959762

版权

WebAPI 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

3、获取元素

1.根据ID获取

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

案例代码

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

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>
        var lis = document.getElementsByTagName('li');
        console.log(lis);// 返回获取元素对象的集合，以伪数组形式存在
        console.log(lis[0]);
       // 想要依次打印元素需要遍历
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // element.getElementsByTagName()  得到某个元素里的某些标签
        var nav = document.getElementById('nav'); // 获得nav元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

1550733441663

注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

3. H5新增获取元素方式

1550733518278

1550733734425

案例代码

<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');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  
        // 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

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

1550733794816

// 1.获取body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);

// 2.获取html 元素
      var htmlEle = document.documentElement;
      console.log(htmlEle);

是瑞瑞小甜心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3、获取元素

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

扫一扫