selectors API 选择器

最新推荐文章于 2021-06-18 14:50:04 发布

原创最新推荐文章于 2021-06-18 14:50:04 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#querySelectorAll()

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了CSS Selectors API中的querySelector和querySelectorAll方法，详细解析了它们如何用于高效地查找DOM元素，以及与getElementById等传统方法相比的优势。

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

selectors API 选择器 CSS 进行交互的

查找元素：

querySelector(str)

返回值：元素对象

参数：str 选择器 #id .one类 p（元素）

注意：若选择器对应的元素有多个则选择第一个

例：
<div id="box">aaa</div>
<div class="one">bbb</div>
<div>ccc</div>
<div class="one">ddd</div>
<script>
    var o1=document.querySelector('#box');
    var o2=document.querySelector('.one');
    var o3=document.querySelector('div');
    console.log(o1,o2,o3);//<div id="box">aaa</div>   <div class="one">bbb</div>  <div id="box">aaa</div>
</script>

querySelectorAll() 比getElementById那些更强大建议使用这个

返回值：集合 NodeList 有索引

例：
<div id="box">aaa</div>
<div class="one">bbb</div>
<div>ccc</div>
<div class="one">ddd</div>
<script>
    var o1=document.querySelectorAll('.one');
    console.log(o1);//NodeList(2) [div.one, div.one]
                    0: div.one
                    1: div.one
                    length: 2
    var o2=document.querySelectorAll('#box');
    console.log(o2);//NodeList [div#box]
</script>

找id若有返回一个长度的集合，若没有返回一个空集合