DOM获取元素

最新推荐文章于 2025-03-29 19:02:19 发布

想想aw

最新推荐文章于 2025-03-29 19:02:19 发布

阅读量827

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_76669854/article/details/134362325

版权

本文详细介绍了JavaScript中DOM操作的六个主要方法：getElementByTagName、getElementById、getElementsByClassName、getElementsByTagName、getElementsByName以及querySelector和querySelectorAll，展示了如何根据标签名、ID、类名、name获取和遍历HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、总结

都以document.开头

二、详细

（1）document.getElementByTagName("标签名") 根据标签获取元素

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

把三个li都获取出来：


        <li>1</li>
        <li>2</li>
        <li>3</li>

       var lis = document.getElementsByTagName('li');
        console.log(lis);

（1-2）注意，当有ol这个父标签包裹li元素时，要求获取每个li的值

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

    <ol>
        <p>11111</p>
    </ol>

//错误示范:
        var ol = document.getElementsByTagName('ol');
        console.log(ol);

错误原因：父元素必须是的单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己

//正确示范:
           var ol = document.getElementsByTagName('ol');
           console.log(ol[0].getElementsByTagName('li'));

（2）document.getElementById("id名") 根据ID获取元素

<div id='times'>2023</div>

var times=document.getElementById("times");
console.log(times); //2023

（3）document.getElementsByClassName("") 根据类名获取元素

<div class='times'>2023</div>

var times=document.getElementsByClassName("times");
console.log(times); //2023

（4）document.getElementsByName("") 根据name名获取元素

以全选案例为例：

爱好:全选<input type="checkbox" name="hobby" value="全选" id='all' onclick="isAllCheck()">
     唱歌<input type="checkbox" name="hobby" value="唱歌">
     跳舞<input type="checkbox" name="hobby" value="跳舞">
     阅读<input type="checkbox" name="hobby" value="阅读">

function isAllCheck() {
                var hobby = document.getElementsByName('hobby');
                for (var h of hobby) {
                    h.checked = document.getElementById('all').checked;
                }
            }

（5）document.querySelector("") 返回指定选择器的第一个元素对象

注意：里面的选择器需要加符号 .box #box等但对于元素标签等直接写

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>

        var box = document.querySelector('.box');
        console.log(box);  //盒子1

（6）document.querySelectorAll("") 返回指定选择器的所有元素

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>

        var box = document.querySelectorAll('.box');
        console.log(box);  //盒子1  盒子2

注意：在都没有满足条件的元素情况下

querySelector返回null，而querySelectorAll返回空的数组[]。