当前位置：首页 > news >正文

2.获取DOM元素

news 2025/7/27 22:44:31

获取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.获取 pconst nav = document.querySelector('p')// const nav = document.querySelector('#nav')console.dir(nav)// 3.获取第一个 liconst li = document.querySelector('ul li:first-child')console.dir(li)// 4.获取所有的 liconst 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>// 方法1const 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' )

查看全文

http://www.lryc.cn/news/98493.html