HTML DOM querySelector() 方法

HTML DOM Document对象

querySelector()返回文档中与指定的选择器或选择器组匹配的第一个元素。

如果找不到匹配项,则返回null。

querySelector()方法仅返回与指定选择器匹配的第一个元素。要返回所有匹配项,请改用querySelectorAll()方法。

语法:

document.querySelector(selectors)
document.querySelector('h1');
测试看看‹/›

浏览器兼容性

表中的数字指定了完全支持querySelector()方法的第一个浏览器版本:

Method
querySelector()13.5103.28

参数值

参数描述
selectors包含一个或多个要匹配的选择器的字符串。此字符串必须是有效的CSS选择器字符串

技术细节

返回值:表示文档中与指定的CSS选择器集匹配的第一个元素的Element对象,如果不存在匹配项,则返回null。
例外情况:SyntaxError-指定的选择器字符串的语法无效
DOM版本:DOM级别1

更多实例

获取id="para"的第一个元素:

document.querySelector('#para');
测试看看‹/›

使用class="demo"获取第一个元素:

document.querySelector(".demo");
测试看看‹/›

获取文档中父元素为<div>元素的第一个<p>元素:

document.querySelector("div > p");
测试看看‹/›

相关参考

CSS教程:CSS选择器

CSS参考:CSS#id选择器

CSS参考:CSS .class选择器

DOM Document querySelectorAll()方法

DOM Document getElementsByClassName()方法

DOM Document getElementsByTagName()方法

HTML DOM Document对象