JavaScript-----获取元素的几种方法

鹿蹊zz

已于 2022-07-04 16:20:15 修改

阅读量8k

点赞数 23

分类专栏： JavaScript 文章标签： javascript

于 2022-06-27 17:34:19 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/125487407

版权

JavaScript 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

2.querySelector()和querySelectorAlI()

三、获取特殊元素（body，html）

1.获取body元素

2.获取html元素

一、获取元素

在开发中，我们想要操作页面上的某个部分（如控制一个div元素的显示或隐藏、修改div元素的内容等），需要先获取到该部分对应的元素，再对其进行操作。下面我们将分别介绍获取元素的几种常见方式。

1.根据id获取元素

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

案例：

<body>
    <div id="box">你好</div>
    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var Obox = document.getElementById('box');
        console.log(Obox);          //结果为: <div id="box">你好</div>
        console.log(typeof Obox);   //结果为: object
        console.dir(Obox);          //结果为: div#box
       // console.dir打印我们返回的元素对象，用来在控制台中查看对象的属性和方法。
    </script>
</body>

2.根据标签获取元素

语法：document.getElementsByTagName(‘标签名’)

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

案例：

<ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>

    </ul>
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>

    </ol>

    <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. 如果页面中只有一个li 返回的还是伪数组的形式 
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // [ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>

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

二、HTML.5新增的获取方式

HTML5中为document对象新增了gelElentsByClassName()、 querySelector()和querSelectorAlI()方法，在使用时需要考虑到浏览器的兼容性问题。接下来我们就来讲解这3种方法的具体使用情况。

1.根据类名获取

document.getElementsByClassName()方法，用于通过类名来获得某些元素集合。

2.querySelector()和querySelectorAlI()

querySelector()方法用于返回指定选择器的第一个元素对象。

querySelecorAlI()方法用于返回指定选择器的所有元素对象集合。

注意：
querySelector和querySelectorAll里面的选择器需要加符号。

比如：document.querySelector(’#nav’);

案例：

<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');
        // 获取class为box的第1个div
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        // 获取id为nav的第1个div
        console.log(nav);
        var li = document.querySelector('li');
        // 获取匹配到的第1个li
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        //获取class为box的所有div
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        //获取匹配到的所有li
        console.log(lis);
    </script>

三、获取特殊元素（body，html）

1.获取body元素

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

2.获取html元素

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

案例：

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

鹿蹊zz

关注

23
点赞
踩
20

收藏

觉得还不错? 一键收藏
10
评论
JavaScript-----获取元素的几种方法

在开发中，我们想要操作页面上的某个部分（如控制一个div元素的显示或隐藏、修改div元素的内容等），需要先获取到该部分对应的元素，再对其进行操作。下面我们将分别介绍获取元素的几种常见方式。案例：2.根据标签获取元素案例： HTML5中为document对象新增了gelElentsByClassName()、 querySelector()和querSelectorAlI()方法，在使用时需要考虑到浏览器的兼容性问题。接下来我们就来讲解这3种方法的具体使用情况。document.getElemen
复制链接

扫一扫