【API】获取DOM对象

最新推荐文章于 2024-05-10 09:10:36 发布

Amusheng

最新推荐文章于 2024-05-10 09:10:36 发布

阅读量108

点赞数

分类专栏： API JS 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_51664510/article/details/130089066

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

API

12 篇文章 0 订阅

订阅专栏

根据css选择器来获取DOM元素

1、获取匹配的第一个元素

语法：document.querySelector('CSS选择器')

参数：包含一个或或多个有效的CSS选择器字符串''

返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。

<body>
<div class="box">123 </div>
<div class="box">abc </div>
<script>
    const box = document.querySelector('div')
    //或者
    //const box = document.querySelector('.box')
    console.log(box)  //选择的是第一个123的box的DOM对象
</script>

</body>

2、选择匹配的多个元素

语法：document.querySelectorAll('CSS选择器')

参数：包含一个或或多个有效的CSS选择器字符串''

返回值：CSS选择器匹配的NodeList 对象集合

不能直接修改，只能通过遍历的形式修改单个元素。

训练：

控制台输出3个li的DOM对象

<body>
<ul class="nav">
    <li>首页</li>
    <li>商品</li>
    <li>订单</li>
</ul>
</body>

//1、获取元素
const lis = document.querySelectorAll('.nav li')
console.log(lis)  //NodeList(3) [li,li,li]
for(let i=0 ; i<lis.length ; i++){
    console.log(lis[i])  //依次输出3个li
}

其他获取DOM元素的方法

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