js中如何获取页面的元素？根据 ID 获取，根据标签签名获取，通过 HTML5 新增的方法获取，特殊元素获取

最新推荐文章于 2024-05-07 16:40:01 发布

奶盖不加糖

最新推荐文章于 2024-05-07 16:40:01 发布

阅读量6.4k

点赞数 2

文章标签： js javascript html

本文链接：https://blog.csdn.net/qq_44156869/article/details/108951788

版权

WebAPIs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

如何获取页面的元素？

如何获取页面的元素？

DOM在我们实际开发中主要用来操作元素。

根据 ID 获取

使用 getElementById() 方法带有 ID 的元素对象。

语法：

//1.先找到文档document
//2.get 获得  element 元素  by 通过  驼峰命名法
var element = document.getElementById(id);

参数：

element 是一个 Element对象。如果当前文档中拥有特定的ID元素不存在则返回null。
id 是大小写敏感的字符串，代表所要查找元素的唯一 ID 。

返回值：

返回一个匹配到 ID 的 DOM Element 对象，若在当前的 Document 下没有找到，则返回 null 。

例子：

<body>
    <div id="time">2020-10-7</div>
    <script>
        //1.因为我们文档页面是从上往下加载，所以先得有标签，所以我们script写到标签的下面
        //先找到文档document
        //2.get 获得  element 元素  by 通过  驼峰命名法
        //3.参数  id 是大小敏感的字符串
        //4.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //5.console.dir  打印我们返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer)
    </script>
</body>

根据标签签名获取

使用 getElementsByTagName(）方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

注意：

因为得到的是一个对象的集合，所以我们想要操作里面得元素就需要遍历。
得到元素对象是动态的。

<body>
    <ul>
        <li>余生路长，一起看月落又重生， 灯灭灯再红</li>
        <li>余生路长，一起看月落又重生， 灯灭灯再红</li>
        <li>余生路长，一起看月落又重生， 灯灭灯再红</li>
        <li>余生路长，一起看月落又重生， 灯灭灯再红</li>
        <li>余生路长，一起看月落又重生， 灯灭灯再红</li>
        <li>余生路长，一起看月落又重生， 灯灭灯再红</li>
    </ul>
    <ul class="nav">
        <li>未经允许，擅自特别喜欢你，不好意思了</li>
        <li>未经允许，擅自特别喜欢你，不好意思了</li>
        <li>未经允许，擅自特别喜欢你，不好意思了</li>
        <li>未经允许，擅自特别喜欢你，不好意思了</li>
        <li>未经允许，擅自特别喜欢你，不好意思了</li>
    </ul>
    <script>
        //1.返回的是 获取过来的元素对象集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        //获取第一个li
        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>

通过 HTML5 新增的方法获取

getElementsByClassName(‘类名’) 根据类名返回元素对象集合

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

querySelector(‘选择器’) 根据指定选择器返回第一个元素对象。

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

querySelectorAll(‘选择器’) 返回指定选择器的所有元素对象集合。

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

例子：

<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 fristbox = document.querySelector('.box');
        console.log(fristbox);
        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>

特殊元素获取

获取 body 元素

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

获取 html 元素

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

例子：


<body>
    <script>
        //1.获取body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        //2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>

奶盖不加糖

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中如何获取页面的元素？根据 ID 获取，根据标签签名获取，通过 HTML5 新增的方法获取，特殊元素获取

如何获取页面的元素DOM在我们实际开发中主要用来操作元素。我们应该如何获取页面的元素呢？获取页面元素可以使用以下几种方式根据 ID 获取根据标签签名获取通过 HTML5 新增的方法获取特殊元素获取根据 ID 获取使用 getElementById() 方法带有ID的元素对象。语法：//先找到文档document//2.get 获得 element 元素 by 通过驼峰命名法var element = document.getElementById(id);参数：
复制链接

扫一扫