教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

JS获取dom元素的方法有哪些?

更新时间:2021年06月17日14时53分 来源:传智教育 浏览次数:

好口碑IT培训

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

1.根据id获取元素

getElementById0方法是由document对象提供的用于查找元素的方法。该方法返回的是拥有指定id的元素,如果没有找到指定id的元素则返回null, 如果存在多个指定id的元素则返回undefined。需要注意的是,JavaScript中严格区分大小写,所以在书写时一定要遵守书写规范,否则程序会报错。 下面我们通过代码演示document.getElementById('id')方法的使用,示例代码如下。

<body>
    <div id="box">你好</div>
    <script>
        var Obox = document.getElementById('box');
        console.log(Obox);          //结果为: <div id="box">你好</div>
        console.log(typeof Obox);   //结果为: object
        console.dir(Obox);          //结果为: div#box
    </script>
</body>

在第2行定义了一个<div>标签,由于文档是从上往下加载的,所以第3~8行的<script>标签和JavaScript代码要写在第2行代码的下面,这样才可以正确获取到div元素。第4行代码用于获取HTML中id为box的元素,并赋值给变量Obox。需要注意的是,id值不能像CSS那样加“#”, 如getElementById("#box")是错误的。第7行的console.dir()方法用来在控制台中查看对象的属性和方法。

2.根据标签获取元素

根据标签名获取元素有两种方式,分别是通过document对象获取元素和通过element对象获取元素,如下所示。

document.getElementsByTagName('标签名');
element.getElementsByTagName('标签名');

上述代码中的element是元素对象的统称。通过元素对象可以查找该元素的子元素或后代元素,实现局部查找元素的效果,而document对象是从整个文档中查找元素。 由于相同标签名的元素可能有多个,上述方法返回的不是单个元素对象,而是一个集合。这个集合是一个类数组对象,或称为伪数组,它可以像数组一样用索引来访问元素,但不能使用push()等方法。使用Array.isArray()也可以证明它不是一个数组。下面我们通过具体代码进行演示。

<body>
    <ul>
        <li>苹果</li><li>香蕉</li><li>西瓜</li><li>樱桃</li>
    </ul>
<ol id="ol">
    <li>绿色</li><li>蓝色</li><li>白色</li><li>红色</li>
</ol>
<script>
    var lis = document.getElementsByTagName('li');  
    // 结果为: HTMLCollection(8) [li, li, li, li, li, li, li, li]   
    console.log(lis);
    // 查看集合中的索引为0的元素,结果为: <li>苹果</li>               
    console.log(lis[0]);
    //遍历集合中的所有元素
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 通过元素对象获取元素
    var ol = document.getElementById('ol');
    //结果为: HTMLCollection(4) [li, li, li, li]
    console.log(ol.getElementsByTagNamel('li'));
</script>
</body>

上述代码中,第2 ~ 4行代码定义了一个<ul>无序列表,第5 ~ 7行代码定义了一个id为ol的<ol>有序列表。第9 ~ 17 行代码演示了document.getElementsByTagName()的用法,其中第9行代码返回的是所有<li>标签元素对象的集合。需要注意的是,即使页面中只有一个li元素,返回结果仍然是一个集合,如果页面中没有该元素,那么将会返回一个空的集合。 通过第11行代码的输出结果可以看出,lis是一个包含8个li元素的集合对象,这个对象的构造函数是HTMLolletiono第13行代码返回了集合中的第1个上元素。第15~ 17行代码采用遍历的方式依次打印了集合里面的元素对象。 第18 ~ 21行代码演示了element. gelElementsByTagName()的用法,这里的element必须是单个元素对象,不能是一- 个集合,所以需要用document.getElementById0获取元素,再调用方法。第21行代码使用getElementsByTagName()去获取ol中的所有li元素。

3.根据name获取元素

通过name属性来获取元素应使用document.getElementsByName()方法,一般用于获取表单元素。name属性的值不要求必须是唯一的,多个元素也可以有同样的名字,如表单中的单选框和复选框。下面我们以复选框为例进行代码演示。

<body>
    <p>请选择你最喜欢的水果(多选)</p>
    <label><input type="checkbox" name="fruit" value="苹果">苹果</label>
    <label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
    <label><input type="checkbox" name="fruit" value="西瓜">西瓜</label>
    <script>
        var fruits = document.getElementsByName('fruit');
        fruits[0].checked = true;
    </script>
</body>

在上述代码中,getElementsByName()方法返回的是一个对象集合,使用索引获取元素。fruits[0].checked为true,表示将fruits中的第1个元素的checked属性值设置为true,表示将这一项勾选。浏览器的预览效果如下图所示。

1623912256283_name获取元素.png

HTML.5新增的获取方式

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

1.根据类名获取

document.getElementsByClassName()方法,用于通过类名来获得某些元素集合。下面通过案例代码进行演示。

<body>
    <span class="one"> 英语</span> <span class="two">数学</span>
    <span class="one">语文</span> <span class="two"> 物理</span>
    <script>
        var Ospanl = document.getElementsByClassName('one');
        var Ospan2 = document.getElementsByClassName('two');
        Ospanl[0].style.fontWeight = 'bold';
        Ospan2[1].style.background = 'red';
    </script>
</body>

分别使用getElementsByClassName()方法获取类名为one和two的集合,并分别存储在Ospan1和Ospan2中。使用下标的形式,查找并设置Ospan1数组中下标为0所对应的第1个元素的fontWeight属性为bold,Ospan2 数组中下标为1所对应的第2个元素的background属性为red。浏览器预览效果如下图所示。

1623912274277_根据类名获取.png

2.querySelector()和querySelectorAlI()

querySelector()方法用于返回指定选择器的第一个元素对象。querySelecorAlI()方法用于返回指定选择器的所有元素对象集合。下面通过案例代码进行演示。

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        var firstBox = document.querySelector('.box');
        console.log(firstBox);  // 获取class为box的第1个div
        var nav = document.querySelector('#nav');
        console.log(nav);       // 获取id为nav的第1个div
        var li = document.querySelector('li');
        console.log(li);        // 获取匹配到的第1个li
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);    //获取class为box的所有div
        var lis = document.querySelectorAll('li');
        console.log(lis);      //获取匹配到的所有li
    </script>
</body>

从上述代码可以看出,在利用querySelector0和querySelectorAl0方法获取操作的无系时,直接书写标签名或CSS选择器名称即可。根据类名获取元素时在类名前面加上“.”,根据id获取元素时在id前面加上“#”。 最后的输出结果如下图所示。

1623912364399_通过CSS选择器获取元素.png



猜你喜欢:

什么是DOM?DOM文档树模型的关键名词解释

BOM有几部分组成?BOM与DOM的区别是什么?

JS中修改this指向的方法有哪些?

Js中深拷贝与浅拷贝的区别

传智教育HTML&JS+前端培训课程

0 分享到:
和我们在线交谈!