JavaScript DOM获取元素

最新推荐文章于 2024-08-18 10:54:05 发布

我莫得感情_

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量653

点赞数 10

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript dom dom操作

本文链接：https://blog.csdn.net/weixin_42442856/article/details/121938549

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、根据根据ID获取getElementById

二、根据标签名获取getElementsByTagName

三、通过HTML5新增方法获取

四、获取特殊元素

一、根据根据ID获取getElementById

注意：

1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面

2.get 获得element 元素by 通过驼峰命名法

3.参数id是大小写敏感的字符串

4.返回的是一个元素对象

5.console.dir打印我们返回的元素对象更好的查看里面的属性和方法

<body>
    <div id='time'>2021-12-21</div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        console.dir(timer);
    </script>
</body>

运行结果如下：

二、根据标签名获取getElementsByTagName

1.返回的是获取过来元素对象的集合以伪数组的形式存储的

2.我们想要依次打印里面的元素对象我们可以采取遍历的方式

3. element.getElementsByTagName()可以得到这个元素里面的某些标签

<body>
    <ul>
        <li>123456789</li>
        <li>123456789</li>
        <li>123456789</li>
        <li>123456789</li>
        <li>123456789</li>
        <li>123456789</li>
    </ul>
    <ul id='nav'>
        <li1>aaaaaa</li1>
        <li1>aaaaaa</li1>
        <li1>aaaaaa</li1>
        <li1>aaaaaa</li1>
        <li1>aaaaaa</li1>
        <li1>aaaaaa</li1>
        <li1>aaaaaa</li1>
    </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]);
        }
        var nav = document.getElementById('nav');
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

运行结果如下：

三、通过HTML5新增方法获取

1.getElementsByClassName( )根据类名获得某些元素集合

2.querySelector( )返回指定选择器的第一个对象，里面的选择器需要加符号

3.querySelectorAll( )返回指定选择器的所有元素对象集合

通过下面的代码一起了解一下

<body>
    <div class="box">盒子</div>
    <div class="box">产品</div>
    <div id='nav'>
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);

        var li = document.querySelector('li');
        console.log(li);

        var allbox = document.querySelectorAll('.box');
        console.log(allbox);

        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

运行结果如下：

四、获取特殊元素

1.document.body//返回body元素对象

2.document.documentElement//返回html元素对象

<body>
    <script>
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);

        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>

运行结果如下：

我莫得感情_

关注

10
点赞
踩
0

收藏

觉得还不错? 一键收藏
18
评论
JavaScript DOM获取元素

目录一、根据根据ID获取getElementById二、根据标签名获取getElementsByTagName三、通过HTML5新增方法获取四、获取特殊元素一、根据根据ID获取getElementById注意：1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面2.get 获得element 元素by 通过驼峰命名法3.参数id是大小写敏感的字符串4.返回的是一个元素对象5.console.dir打印我们返回的元素对象更好的查看里面
复制链接

扫一扫

专栏目录