JS 参考手册

JS 参考手册(类别排序) JS 参考手册(字母排序)

JavaScript

JS Array JS Boolean JS Classes JS Date JS Error JS Global JS JSON JS Math JS Number JS 运算符 JS RegExp JS 语句 JS String

HTML DOM

DOM Attributes DOM Document DOM Element DOM Events DOM Event 对象 DOM HTMLCollection DOM Location DOM Navigator DOM Screen DOM Style
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundColor backgroundImage backgroundPosition backgroundRepeat backgroundClip backgroundOrigin backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap cssFloat font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex
DOM Window

Web APIs

API Console API Geolocation API History API Storage

HTML 对象

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

其他参考手册

CSSStyleDeclaration JS 类型转换


HTML DOM querySelector() 方法

❮ Document 对象

实例

使用 class="example" 获取文档中的第一个元素:

document.querySelector(".example");
亲自试一试 »

页面下方有更多实例。


定义和用法

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

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

如果选择器匹配文档中多次使用的ID (请注意,"id" 在一个页面中应该是唯一的,并且不应该被多次使用),它将返回第一个匹配元素。

有关 CSS 选择器的更多信息,请访问 CSS 选择器教程CSS 选择器参考


浏览器支持

表中的数字指定了完全支持该方法的第一个浏览器版本。

方法
querySelector() 4.0 8.0 3.5 3.2 10.0

语法

document.querySelector(CSS selectors)

参数值

参数 类型 描述
CSS selectors String 必需。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器,使用逗号隔开,返回一个匹配的元素。

提示: 更多 CSS 选择器信息,请参阅 CSS 选择器参考


技术细节

DOM 版本: Selectors Level 1 Document Object
返回值: NodeList 对象,匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。

更多实例

实例

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

document.querySelector("p");
亲自试一试 »

实例

使用 class="example" 获取文档中的第一个 <p> 元素:

document.querySelector("p.example");
亲自试一试 »

实例

使用 id="demo" 更改元素的文本:

document.querySelector("#demo").innerHTML = "Hello World!";
亲自试一试 »

实例

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

document.querySelector("div > p");
亲自试一试 »

实例

获取文档中具有 "target" 属性的第一个 <a> 元素:

document.querySelector("a[target]");
亲自试一试 »

实例

这个例子演示了多个选择器是如何工作的。

假定你选择了两个选择器: <h2> 和 <h3> 元素。

以下代码将为文档的第一个 <h2> 元素添加背景颜色:

<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";
亲自试一试 »

但是,如果文档中 <h3> 元素位于 <h2> 元素之前,<h3> 元素将会被设置指定的背景颜色。

<h3>A h3 element</h3>
<h2>A h2 element</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";
亲自试一试 »

相关页面

CSS 教程: CSS Selectors

CSS 参考手册: CSS 选择器参考手册

JavaScript 教程: JavaScript HTML DOM Node List

JavaScript 参考手册: element.querySelector()

HTML DOM 参考手册: document.querySelectorAll()

JavaScript 参考手册: element.querySelectorAll()


❮ Document 对象