JavaScript选择DOM的方式

最新推荐文章于 2023-09-24 13:45:43 发布

sweetllh

最新推荐文章于 2023-09-24 13:45:43 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/sweetllh/article/details/70231469

javascript 专栏收录该内容

73 篇文章

订阅专栏

本文介绍了五种常用的DOM元素选取方法，包括通过ID、name、标签名、类名及CSS选择器选取元素的具体使用方式和注意事项。

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

通过ID选取元素(getElementById)
1.1 使用方法：document.getElementById(‘domid’)，domid就需要选取元素的id属性值
1.2 兼容性：低于IE8版本的IE浏览器getElementById的方法是不区分元素的大小写，并且会返回匹配id属性的元素
通过name选择元素(getElementsByName)
2.1 使用方式，document.getElementsByName(‘domName’)，domName需要选择元素的name属性的值
2.2 说明：
　　a. 返回值是一个nodeList集全(区别于array)
　　b. 和id属性不一样，name属性只在少数的dom元素中有效(form, input, iframe, img)，方便表单数据提交
2.3 兼容性：IE中id属性匹配的元素也会一起返回
通过标签名获取元素(getElementsByTagName)
3.1 使用方式：document.getElementsByTagName(‘tagname’)，dom元素里的标签名
3.2 说明：
　　a. 返回的结果是一个nodeList
　　b. 只能选取调用该方法的元素的后代元素
　　c. tagName不区分大小写的
　　d. 当tagName为*时，表示选取所有的元素(需遵从规则b)
通过css类选择器选取元素(getElementsByClassName)
4.1 使用方式：document.getElementsByClassName(‘className’)，className标签里的class属性的值
4.2 说明：
　　a. 返回的结果是一个nodeList
　　b. 只能返回该方法元素的后代元素
4.3 兼容性：IE8及其以下的版本本浏览器没有实现这个方法
通过CSS选择器选取元素(querySelector, querySelectorAll)
5.1 使用方式,document.querySelector(‘selector’)/document.querySelectorAll(‘selector’)，querySelector只返回第一个符合条件的元素，querySelectorAll返回所有符合条件的元素
5.2 说明：
　　a. 返回值是一个nodeList
5.3 兼容性：IE8及其以下的版本只支持CSS2样式的选择器语法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <form>
            <input type="text" name="username" />
            <input type="password" name="password" />
        </form>

        <div id="box1">
            <ul class="u1">
                <li class="l1-1">1</li>
                <li class="l1-2">2</li>
                <li class="l1-3">3</li>
                <li class="l1-4">4</li>
            </ul>
            <ul class="u2">
                <li class="l2-1">1</li>
                <li class="l2-2">2</li>
                <li class="l2-3">3</li>
                <li class="l2-4">4</li>
            </ul>
        </div>
        <div id="box2"></div>

    </body>
    <script>
        var nodeList = document.getElementsByName('username');
        console.log(typeof nodeList)
        console.log(nodeList[0]);
        console.log('====================================');

        // 根据标签名查找
        var div = document.querySelector('div');
        console.log(div);
        var dives = document.querySelectorAll('div');
        console.log(dives);
        // 根据id查找，需要id属性的值前添加#，表示依据id来查找
        var id = document.querySelectorAll('#box1');
        console.log(id);
        // 根据class名称查找，需要在class的内容前加.表示根据类查找
        var classess = document.querySelectorAll('.u1');
        console.log(classess);

        // 组全查找，.u1 li
        var u1Lies = document.querySelectorAll('.u1 li');
        console.log(u1Lies);
        // 得到 class="u1"下的class="l1-3"
        var u1L13 = document.querySelectorAll('.u1 .l1-3');
        console.log(u1L13);
    </script>
</html>