JS PHP HTML5 CSS3 jQuery SQL BootStrap5 Other

---

其他 字符串 数组 正则 存储 表单 数据库 选择器 屏幕 历史 时间 数学 元素 节点 属性 窗口 地址 动画 棋子 查找 排序 全局 JSON 浏览器 数据类型

<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 异常。