HTML DOM 文档 querySelector()

获取第一个 <p> 元素：

document.querySelector("p");

获取第一个带有 class="example" 的元素：

document.querySelector(".example");

下面有更多示例。

描述

这个querySelector()方法返回第一的与 CSS 选择器匹配的元素。

回来全部匹配（不仅仅是第一个），使用querySelectorAll()反而。

两个都querySelector()和querySelectorAll()如果选择器无效，则抛出 SYNTAX_ERR 异常。

节点列表和HTML集合是非常一样的事情。

两者都是从文档中提取的节点（元素）的类似数组的集合（列表）。可以通过索引号来访问节点。索引从 0 开始。

两者都有一个长度返回列表（集合）中元素数量的属性。

HTMLCollection 是一个集合文档元素。

NodeList 是一个集合文档节点（元素节点、属性节点和文本节点）。

HTMLCollection 项目可以通过其名称、ID 或索引号进行访问。

NodeList 项只能通过其索引号来访问。

HTMLCollection 始终是居住收藏。示例：如果将 <li> 元素添加到 DOM 中的列表，则 HTMLCollection 中的列表也会更改。

NodeList 通常是静止的收藏。示例：如果将 <li> 元素添加到 DOM 中的列表中，NodeList 中的列表不会改变。

这个getElementsByClassName()和getElementsByTagName()方法返回一个实时 HTMLCollection。

这个querySelectorAll()方法返回一个静态 NodeList。

这个childNodes属性返回一个活动的 NodeList。

document.querySelector( CSS selectors)

Parameter	Description
CSS selectors	Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples").

类型	描述
对象	A节点列表与 CSS 选择器匹配的第一个元素。如果没有找到匹配项，`null`被返回。

document.querySelector()是 DOM Level 1 (1998) 功能。

所有浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11