↓返回底部
JS PHP HTML5 CSS3 jQuery SQL BootStrap5 Other
其他 字符串 数组 正则 存储 表单 数据库 选择器 屏幕 历史 时间 数学 元素 节点 属性 窗口 地址 动画 棋子 查找 排序 全局 JSON 浏览器 数据类型

querySelectorAll选择所有p标签

<meta charset="utf-8">
<p>Hello World!</p>
<b>JavaScript HTML DOM!</b>
<p>thanks</p>
<p>修改所有 p 元素的背景颜色。</p>

<button onclick="test()">点我</button>

<script>
function test() {
    var nodelist = document.querySelectorAll("p");
    for (var i = 0; i < nodelist.length; i++) {
        nodelist[i].style.color = "red";
    }
}
</script>

运行结果

定义和用法

.....

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList对象。

NodeList 对象表示节点的集合。可以通过索引访问,索引值从 0 开始。

提示: 你可以使用 NodeList 对象的 length属性来获取匹配选择器的元素属性,然后你可以遍历所有元素,从而获取你想要的信息。

注意: Internet Explorer 8 支持 CSS2 选择器。 IE9 及更高版本的浏览器已经支持 CSS3 选择器。

语法

elementList = document.querySelectorAll(selectors);
  • elementList 是一个静态的 NodeList 类型的对象。
  • selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。

参数值

参数 类型 描述
CSS 选择器 String 必须。 指定一个或多个匹配 CSS 选择器的元素。可以通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素。

多个选择器使用逗号(,)分隔。

提示: CSS 选择器更多内容可以参考 CSS 选择器

返回值

DOM 版本: Level 1 Document Object
返回值: 一个 NodeList 对象,表示文档中匹配指定 CSS 选择器的所有元素。 NodeList 是一个静态的 NodeList 类型的对象。如果指定的选择器不合法,则抛出一个 SYNTAX_ERR 异常。

 

  • Server Sent | 在线编辑 | 1.php |
  • 欢迎纠错:如果发现错误,请发到我的QQ:3166692976,感谢!
  • 本站及其内容仅作为站长本人学习探索之用途,不保证(包括但不限于)内容的准确性、有效性。本站保留解释权。
  • 心不得满,事不得全。鸟飞不尽,话说不完。休息一下吧!
  • 1500km.com,   Copyright ©2022,   all rights received.
  • ↑返回顶部