HTML5--JS API-新的选择器

最新推荐文章于 2022-03-28 16:56:09 发布

原创最新推荐文章于 2022-03-28 16:56:09 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

104 篇文章

订阅专栏

本文详细介绍了HTML中用于获取元素的选择器方法，包括querySelector、querySelectorAll和getElementsByClassName，通过具体案例展示了如何使用这些方法获取指定类型的元素，并提供了实际应用场景的示例。

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

新的选择器
document.querySelector("selector");
selector:根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null;
支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

document.querySelectorAll("selector");
selector:根据CSS选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组;
支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

document.getElementsByClassName("selector");
selector:根据类选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组;
支持： Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+

案例如下：
HTML结构如下:

 1 <div class="content">　　
 2 <ul>　　　　
 3 <li>实例</li>
 4 　　　　
 5 <li class="exp">实例</li>
 6 　　　　
 7 <li class="exp">实例</li>
 8 　　　　
 9 <li class="exp">实例</li>
10 　　　　
11 <li>实例</li>
12 
13 　　</ul>
14 
15 </div>

1、如果想要获得第一个li元素，我们只需要:
document.querySelector(".content ul li");

2、如果想要获得所有li元素，我们只需要:
document.querySelectorAll(".content ul li");

3、如果想要获得所有class为w3c的li元素，我们只需要:
document.getElementsByClassName("w3c");