2.获取DOM元素-CSDN博客

本文链接：https://blog.csdn.net/m0_74891783/article/details/131955391

获取DOM元素就是利用JS选择页面中的标签元素

2.1 根据CSS选择器来获取DOM元素(重点)

2.1.1选择匹配的第一个元素

语法:

document.querySelector( 'css选择器' )

参数:
包含一个或多个有效的CSS选择器字符串
返回值:
CSS选择器匹配的第一个元素，一个HTMLElement对象。
如果没有匹配到，则返回null。

2.1.2选择匹配的多个元素

语法:

document.querySelectorAll( 'css选择器' )

参数:
包含一个或多个有效的CSS选择器字符串
返回值:
CSS选择器匹配的 NodeList 对象集合

【示例】

<body>
    <div class="box">abc</div>
    <div class="box">123</div>
    <p id="nav">导航栏</p>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        // 1.获取 div 匹配的第一个元素
        const box = document.querySelector('div')
        // const box = document.querySelector('.box')
        console.dir(box)
        // 2.获取 p
        const nav = document.querySelector('p')
		// const nav = document.querySelector('#nav')
        console.dir(nav)
        // 3.获取第一个 li
        const li = document.querySelector('ul li:first-child')
        console.dir(li)
        // 4.获取所有的 li
        const lis = document.querySelectorAll('ul li')
        console.dir(lis)
    </script>
</body>

在这里插入图片描述

2.1.3伪数组

querySelectorAll() 得到的是一个伪数组
➢有长度、有索引号的数组
➢但是没有pop() push() 等数组方法
想要得到里面的每一个对象，需要遍历 (for) 的方式获得。
哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，只是里面只有一个元素而已

遍历打印所有的小li ：
【示例代码】

<body>
    <ul class="nav">
        <li>我的首页</li>
        <li>产品信息</li>
        <li>联系方式</li>
    </ul>
    <script>
        // 方法1
        const lis = document.querySelectorAll('.nav li')
        for (let i = 0; i < lis.length; i++) {
            console.dir(lis[i])
        }
        // 方法2
        // for (let i = 1; i <= 3; i++) {
        //     const li = document.querySelector(`ul li:nth-child(${i})`)
        //     console.dir(li)
        // }
    </script>
</body>

在这里插入图片描述
注意：
（1）获取一个DOM元素用querySelector()，能直接操作修改
（2）获取多个DOM元素用querySelectorAll()，不能直接操作修改，只能通过遍历的方式给里面的元素做修改

2.2 其他获取DOM元素方法(了解)

//根据id获取一个元素
document.getElementById( 'nav' )
//根据 标签 获取一类元素 获取页面所有div
document.getElementsByTagName( 'div' )
//根据 类名 获取元素 获取页面所有类名为w的
document.getElementsByClassName( 'w' )