getElementById vs. querySelector

JavaScript performance comparison

Revision 304 of this test case created by Chris Adams

Preparation code

                <div class="wiki-main-content" id="document-main">
                    <div class="center">
                        <!-- start the main content container -->
                        <div
                            id="wiki-column-container"
                            class="wiki-left-present"
                        >
                            <!-- content row with three strips -->
                            <div
                                class="column-container column-container-reverse"
                            >
                                <!-- center: main article content -->
                                <div
                                    id="wiki-content"
                                    class="column-main wiki-column text-content"
                                >
                                    <!-- just the article content -->
                                    <article id="wikiArticle">
                                        <div></div>

                                        <p>
                                            The
                                            <code
                                                ><strong
                                                    >querySelector()</strong
                                                ></code
                                            >
                                            method of the
                                            <a
                                                href="/en-US/docs/Web/API/Element"
                                                title="Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element."
                                                ><code>Element</code></a
                                            >
                                            interface returns the first element
                                            that is a descendant of the element
                                            on which it is invoked that matches
                                            the specified group of selectors.
                                        </p>

                                        <h2 id="Syntax">Syntax</h2>

                                        <pre
                                            class="syntaxbox"
                                        ><var>element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s);
</pre>

                                        <h3 id="Parameters">Parameters</h3>

                                        <dl>
                                            <dt><code>selectors</code></dt>
                                            <dd>
                                                A group of
                                                <a
                                                    href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors"
                                                    >selectors</a
                                                >
                                                to match the descendant elements
                                                of the
                                                <a
                                                    href="/en-US/docs/Web/API/Element"
                                                    title="Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element."
                                                    ><code>Element</code></a
                                                >
                                                <code>baseElement</code>
                                                against; this must be valid CSS
                                                syntax, or a
                                                <code>SyntaxError</code>
                                                exception will occur. The first
                                                element found which matches this
                                                group of selectors is returned.
                                            </dd>
                                        </dl>

                                        <h3 id="Return_value">Return value</h3>

                                        <p>
                                            The first descendant element of
                                            <code>baseElement</code> which
                                            matches the specified group of
                                            <code>selectors</code>. The entire
                                            hierarchy of elements is considered
                                            when matching, including those
                                            outside the set of elements
                                            including
                                            <code>baseElement</code> and its
                                            descendants; in other words,
                                            <code>selectors</code> is first
                                            applied to the whole document, not
                                            the <code>baseElement</code>, to
                                            generate an initial list of
                                            potential elements. The resulting
                                            elements are then examined to see if
                                            they are descendants of
                                            <code>baseElement</code>. The first
                                            match of those remaining elements is
                                            returned by the
                                            <code>querySelector()</code> method.
                                        </p>

                                        <p>
                                            If no matches are found, the
                                            returned value is <code>null</code>.
                                        </p>

                                        <h3 id="Exceptions">Exceptions</h3>

                                        <dl>
                                            <dt><code>SyntaxError</code></dt>
                                            <dd>
                                                The specified
                                                <code>selectors</code> are
                                                invalid.
                                            </dd>
                                        </dl>

                                        <h2 id="Examples">Examples</h2>

                                        <p>Let's consider a few examples.</p>

                                        <h3
                                            id="Find_a_specific_element_with_specific_values_of_an_attribute"
                                        >
                                            Find a specific element with
                                            specific values of an attribute
                                        </h3>

                                        <p>
                                            In this first example, the first
                                            <a
                                                href="/en-US/docs/Web/HTML/Element/style"
                                                title="The HTML &lt;style> element contains style information for a document, or part of a document."
                                                ><code>&lt;style&gt;</code></a
                                            >
                                            element which either has no type or
                                            has type "text/css" in the HTML
                                            document body is returned:
                                        </p>

                                        <pre class="brush:js">
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
</pre
                                        >

                                        <h3 id="The_entire_hierarchy_counts">
                                            The entire hierarchy counts
                                        </h3>

                                        <p>
                                            This example demonstrates that the
                                            hierarchy of the entire document is
                                            considered when applying
                                            <code>selectors</code>, so that
                                            levels outside the specified
                                            <code>baseElement</code> are still
                                            considered when locating matches.
                                        </p>

                                        <h4 id="HTML">HTML</h4>

                                        <pre class="brush: html">
&lt;div&gt;
  &lt;h5&gt;Original content&lt;/h5&gt;
  &lt;p&gt;
    inside paragraph
    &lt;span&gt;inside span&lt;/span&gt;
    inside paragraph
  &lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;h5&gt;Output&lt;/h5&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
&lt;/div&gt;</pre
                                        >

                                        <h4 id="JavaScript">JavaScript</h4>

                                        <pre class="brush: js">
var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
  (baseElement.querySelector("div span").innerHTML);</pre
                                        >

                                        <h4 id="Result">Result</h4>

                                        <p>The result looks like this:</p>

                                        <p>
                                            <iframe
                                                class="live-sample-frame sample-code-frame"
                                                frameborder="0"
                                                height="160"
                                                id="frame_The_entire_hierarchy_counts"
                                                src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/querySelector$samples/The_entire_hierarchy_counts?revision=1525178"
                                                width="600"
                                            ></iframe>
                                        </p>

                                        <p>
                                            Notice how the
                                            <code>"div span"</code> selector
                                            still successfully matches the
                                            <a
                                                href="/en-US/docs/Web/HTML/Element/span"
                                                title="The HTML &lt;span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang."
                                                ><code>&lt;span&gt;</code></a
                                            >
                                            element, even though the
                                            <code>baseElement</code>'s child
                                            nodes do not include the
                                            <a
                                                class="new"
                                                href="/en-US/docs/Web/API/Div"
                                                rel="nofollow"
                                                title="The documentation about this has not yet been written; please consider contributing!"
                                                ><code>div</code></a
                                            >
                                            element (it is still part of the
                                            specified selector).
                                        </p>

                                        <h3 id="More_examples">
                                            More examples
                                        </h3>

                                        <p>
                                            See
                                            <a
                                                href="/en-US/docs/Web/API/Document/querySelector"
                                                title="The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned."
                                                ><code
                                                    >Document.querySelector()</code
                                                ></a
                                            >
                                            for additional examples of the
                                            proper format for the
                                            <code>selectors</code>.
                                        </p>

                                        <h2 id="Specifications">
                                            Specifications
                                        </h2>

                                        <table class="standard-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">
                                                        Specification
                                                    </th>
                                                    <th scope="col">Status</th>
                                                    <th scope="col">Comment</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <a
                                                            class="external"
                                                            href="https://dom.spec.whatwg.org/#dom-parentnode-queryselectorall"
                                                            hreflang="en"
                                                            lang="en"
                                                            rel="noopener"
                                                            >DOM<br /><small
                                                                lang="en-US"
                                                                >The definition
                                                                of
                                                                'querySelector()'
                                                                in that
                                                                specification.</small
                                                            ></a
                                                        >
                                                    </td>
                                                    <td>
                                                        <span
                                                            class="spec-Living"
                                                            >Living
                                                            Standard</span
                                                        >
                                                    </td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <a
                                                            class="external"
                                                            href="https://dev.w3.org/2006/webapi/selectors-api2/#queryselectorall"
                                                            hreflang="en"
                                                            lang="en"
                                                            rel="noopener"
                                                            >Selectors API Level
                                                            2<br /><small
                                                                lang="en-US"
                                                                >The definition
                                                                of
                                                                'querySelectorAll()'
                                                                in that
                                                                specification.</small
                                                            ></a
                                                        >
                                                    </td>
                                                    <td>
                                                        <span
                                                            class="spec-Obsolete"
                                                            >Obsolete</span
                                                        >
                                                    </td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <a
                                                            class="external"
                                                            href="https://www.w3.org/TR/selectors-api/#queryselectorall"
                                                            hreflang="en"
                                                            lang="en"
                                                            rel="noopener"
                                                            >Selectors API Level
                                                            1<br /><small
                                                                lang="en-US"
                                                                >The definition
                                                                of
                                                                'querySelectorAll()'
                                                                in that
                                                                specification.</small
                                                            ></a
                                                        >
                                                    </td>
                                                    <td>
                                                        <span
                                                            class="spec-Obsolete"
                                                            >Obsolete</span
                                                        >
                                                    </td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <h2 id="Browser_compatibility">
                                            Browser compatibility
                                        </h2>

                                        <div class="hidden">
                                            The compatibility table on this page
                                            is generated from structured data.
                                            If you'd like to contribute to the
                                            data, please check out
                                            <a
                                                class="external"
                                                href="https://github.com/mdn/browser-compat-data"
                                                rel="noopener"
                                                >https://github.com/mdn/browser-compat-data</a
                                            >
                                            and send us a pull request.
                                        </div>

                                        <p></p>
                                        <div class="bc-data">
                                            <a
                                                class="bc-github-link external"
                                                href="https://github.com/mdn/browser-compat-data"
                                                rel="noopener"
                                                >Update compatibility data on
                                                GitHub</a
                                            >
                                            <table
                                                class="bc-table bc-table-web"
                                            >
                                                <thead>
                                                    <tr class="bc-platforms">
                                                        <td></td>
                                                        <th
                                                            class="bc-platform-desktop"
                                                            colspan="6"
                                                        >
                                                            <span>Desktop</span>
                                                        </th>
                                                        <th
                                                            class="bc-platform-mobile"
                                                            colspan="7"
                                                        >
                                                            <span>Mobile</span>
                                                        </th>
                                                    </tr>
                                                    <tr class="bc-browsers">
                                                        <td></td>
                                                        <th
                                                            class="bc-browser-chrome"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-chrome"
                                                                >Chrome</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-edge"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-edge"
                                                                >Edge</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-firefox"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-firefox"
                                                                >Firefox</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-ie"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-ie"
                                                                >Internet
                                                                Explorer</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-opera"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-opera"
                                                                >Opera</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-safari"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-safari"
                                                                >Safari</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-webview_android"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-webview_android"
                                                                >Android
                                                                webview</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-chrome_android"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-chrome_android"
                                                                >Chrome for
                                                                Android</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-edge_mobile"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-edge_mobile"
                                                                >Edge
                                                                Mobile</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-firefox_android"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-firefox_android"
                                                                >Firefox for
                                                                Android</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-opera_android"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-opera_android"
                                                                >Opera for
                                                                Android</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-safari_ios"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-safari_ios"
                                                                >Safari on
                                                                iOS</span
                                                            >
                                                        </th>
                                                        <th
                                                            class="bc-browser-samsunginternet_android"
                                                        >
                                                            <span
                                                                class="bc-head-txt-label bc-head-icon-samsunginternet_android"
                                                                >Samsung
                                                                Internet</span
                                                            >
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <th scope="row">
                                                            <code
                                                                >querySelector</code
                                                            >
                                                        </th>
                                                        <td
                                                            class="bc-supports-yes bc-browser-chrome"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Chrome</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            1
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-edge"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Edge</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            12
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-firefox"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Firefox</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            3.5
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-ie bc-has-history"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >IE</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            9
                                                            <div
                                                                class="bc-icons"
                                                            ></div>
                                                            <section
                                                                class="bc-history"
                                                                id="sect1"
                                                            >
                                                                <dl>
                                                                    <dt
                                                                        class="bc-supports-yes bc-supports"
                                                                    >
                                                                        <abbr
                                                                            class="bc-level-yes only-icon"
                                                                            title="Full support"
                                                                        >
                                                                            <span
                                                                                >Full
                                                                                support</span
                                                                            >
                                                                        </abbr>
                                                                        9
                                                                        <div
                                                                            class="bc-icons"
                                                                        ></div>
                                                                    </dt>
                                                                    <dd></dd>
                                                                    <dt
                                                                        class="bc-supports-partial bc-supports"
                                                                    >
                                                                        <abbr
                                                                            class="bc-level-partial only-icon"
                                                                            title="Partial support"
                                                                        >
                                                                            <span
                                                                                >Partial
                                                                                support</span
                                                                            > </abbr
                                                                        >8
                                                                        <div
                                                                            class="bc-icons"
                                                                        >
                                                                            <abbr
                                                                                class="only-icon"
                                                                                title="See implementation notes"
                                                                                ><span
                                                                                    >Notes</span
                                                                                ><i
                                                                                    class="ic-footnote"
                                                                                ></i
                                                                            ></abbr>
                                                                        </div>
                                                                    </dt>
                                                                    <dd>
                                                                        <abbr
                                                                            class="only-icon"
                                                                            title="See implementation notes"
                                                                            ><span
                                                                                >Notes</span
                                                                            ><i
                                                                                class="ic-footnote"
                                                                            ></i
                                                                        ></abbr>
                                                                        <code
                                                                            >querySelector()</code
                                                                        >
                                                                        is
                                                                        supported,
                                                                        but only
                                                                        for CSS
                                                                        2.1
                                                                        selectors.
                                                                    </dd>
                                                                </dl>
                                                            </section>
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-opera"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Opera</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            Yes
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-safari"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Safari</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            6
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-webview_android"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >WebView
                                                                Android</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            Yes
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-chrome_android"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Chrome
                                                                Android</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            Yes
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-edge_mobile"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Edge
                                                                Mobile</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            Yes
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-firefox_android"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Firefox
                                                                Android</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            Yes
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-opera_android"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Opera
                                                                Android</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            Yes
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-safari_ios"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Safari
                                                                iOS</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            Yes
                                                        </td>
                                                        <td
                                                            class="bc-supports-yes bc-browser-samsunginternet_android"
                                                        >
                                                            <span
                                                                class="bc-browser-name"
                                                                >Samsung
                                                                Internet
                                                                Android</span
                                                            ><abbr
                                                                class="bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr>
                                                            Yes
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <section
                                                class="bc-legend"
                                                id="sect2"
                                            >
                                                <h3
                                                    class="offscreen"
                                                    id="Legend"
                                                >
                                                    Legend
                                                </h3>
                                                <dl>
                                                    <dt>
                                                        <span
                                                            class="bc-supports-yes bc-supports"
                                                        >
                                                            <abbr
                                                                class="bc-level bc-level-yes only-icon"
                                                                title="Full support"
                                                            >
                                                                <span
                                                                    >Full
                                                                    support</span
                                                                >
                                                            </abbr></span
                                                        >
                                                    </dt>
                                                    <dd>Full support</dd>
                                                    <dt>
                                                        <abbr
                                                            class="only-icon"
                                                            title="See implementation notes."
                                                            ><span
                                                                >See
                                                                implementation
                                                                notes.</span
                                                            ><i
                                                                class="ic-footnote"
                                                            ></i
                                                        ></abbr>
                                                    </dt>
                                                    <dd>
                                                        See implementation
                                                        notes.
                                                    </dd>
                                                </dl>
                                            </section>
                                        </div>
                                        <p></p>

                                        <h2 id="See_also">See also</h2>

                                        <ul>
                                            <li>
                                                <a
                                                    href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors"
                                                    >Locating DOM elements using
                                                    selectors</a
                                                >
                                            </li>
                                            <li>
                                                <a
                                                    href="/en-US/docs/Web/CSS/Attribute_selectors"
                                                    >Attribute selectors</a
                                                >
                                                in the CSS Guide
                                            </li>
                                            <li>
                                                <a
                                                    href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors"
                                                    >Attribute selectors</a
                                                >
                                                in the MDN Learning Area
                                            </li>
                                            <li>
                                                <a
                                                    href="/en-US/docs/Web/API/Element/querySelectorAll"
                                                    title="The Element method querySelectorAll() returns a static (not live) NodeList representing a list of elements matching the specified group of selectors which are descendants of the element on which the method was called."
                                                    ><code
                                                        >Element.querySelectorAll()</code
                                                    ></a
                                                >
                                            </li>
                                            <li>
                                                <a
                                                    href="/en-US/docs/Web/API/Document/querySelector"
                                                    title="The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned."
                                                    ><code
                                                        >Document.querySelector()</code
                                                    ></a
                                                >
                                                and
                                                <a
                                                    href="/en-US/docs/Web/API/Document/querySelectorAll"
                                                    title="The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors."
                                                    ><code
                                                        >Document.querySelectorAll()</code
                                                    ></a
                                                >
                                            </li>
                                            <li>
                                                <a
                                                    href="/en-US/docs/Web/API/DocumentFragment/querySelector"
                                                    title="The DocumentFragment.querySelector() method returns the first element, or null if no matches are found, within the DocumentFragment (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors."
                                                    ><code
                                                        >DocumentFragment.querySelector()</code
                                                    ></a
                                                >
                                                and
                                                <a
                                                    href="/en-US/docs/Web/API/DocumentFragment/querySelectorAll"
                                                    title="The DocumentFragment.querySelectorAll() method returns a NodeList of elements within the DocumentFragment (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors."
                                                    ><code
                                                        >DocumentFragment.querySelectorAll()</code
                                                    ></a
                                                >
                                            </li>
                                            <li>
                                                <a
                                                    href="/en-US/docs/Web/API/ParentNode/querySelector"
                                                    title="The ParentNode mixin defines the querySelector() method as returning an Element representing the first element matching the specified group of selectors which are descendants of the object on which the method was called."
                                                    ><code
                                                        >ParentNode.querySelector()</code
                                                    ></a
                                                >
                                                and
                                                <a
                                                    href="/en-US/docs/Web/API/ParentNode/querySelectorAll"
                                                    title="The ParentNode mixin defines the querySelectorAll() method as returning a NodeList representing a list of elements matching the specified group of selectors which are descendants of the object on which the method was called."
                                                    ><code
                                                        >ParentNode.querySelectorAll()</code
                                                    ></a
                                                >
                                            </li>
                                            <li>
                                                <a
                                                    href="/en-US/docs/Code_snippets/QuerySelector"
                                                    >Code snippets for
                                                    querySelector</a
                                                >
                                            </li>
                                            <li>
                                                Other methods that take
                                                selectors:
                                                <a
                                                    href="/en-US/docs/Web/API/Element/closest"
                                                    title="For browsers that do not support Element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning IE9+), a polyfill exists:"
                                                    ><code
                                                        >element.closest()</code
                                                    ></a
                                                >
                                                and
                                                <a
                                                    href="/en-US/docs/Web/API/Element/matches"
                                                    title="The matches() method of the Element interface returns true if the element would be selected by the specified selector string; otherwise, it returns false."
                                                    ><code
                                                        >element.matches()</code
                                                    ></a
                                                >.
                                            </li>
                                        </ul>
                                    </article>

                                    <!-- contributors -->
                                    <div class="wiki-block contributors">
                                        <h2 class="offscreen">
                                            Document Tags and Contributors
                                        </h2>

                                        <div
                                            class="tag-attach-list contributors-sub"
                                        >
                                            <svg
                                                class="icon icon-tags"
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="30"
                                                height="28"
                                                viewBox="0 0 30 28"
                                                aria-hidden="true"
                                            >
                                                <path
                                                    d="M7 7c0-1.109-.891-2-2-2s-2 .891-2 2 .891 2 2 2 2-.891 2-2zm16.672 9c0 .531-.219 1.047-.578 1.406l-7.672 7.688c-.375.359-.891.578-1.422.578s-1.047-.219-1.406-.578L1.422 13.906C.625 13.125 0 11.609 0 10.5V4c0-1.094.906-2 2-2h6.5c1.109 0 2.625.625 3.422 1.422l11.172 11.156c.359.375.578.891.578 1.422zm6 0c0 .531-.219 1.047-.578 1.406l-7.672 7.688a2.08 2.08 0 0 1-1.422.578c-.812 0-1.219-.375-1.75-.922l7.344-7.344c.359-.359.578-.875.578-1.406s-.219-1.047-.578-1.422L14.422 3.422C13.625 2.625 12.11 2 11 2h3.5c1.109 0 2.625.625 3.422 1.422l11.172 11.156c.359.375.578.891.578 1.422z"
                                                />
                                            </svg>
                                            <strong>Tags:</strong>&nbsp;
                                            <ul class="tags tags-small">
                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/API"
                                                        rel="nofollow"
                                                        >API</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/CSS"
                                                        rel="nofollow"
                                                        >CSS</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/CSS%20Selectors"
                                                        rel="nofollow"
                                                        >CSS Selectors</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/DOM"
                                                        rel="nofollow"
                                                        >DOM</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/Element"
                                                        rel="nofollow"
                                                        >Element</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/Elements"
                                                        rel="nofollow"
                                                        >Elements</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/Finding%20Elements"
                                                        rel="nofollow"
                                                        >Finding Elements</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/Locating%20Elements"
                                                        rel="nofollow"
                                                        >Locating Elements</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/Method"
                                                        rel="nofollow"
                                                        >Method</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/querySelector"
                                                        rel="nofollow"
                                                        >querySelector</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/Reference"
                                                        rel="nofollow"
                                                        >Reference</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/Searching%20Elements"
                                                        rel="nofollow"
                                                        >Searching Elements</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/Selecting%20Elements"
                                                        rel="nofollow"
                                                        >Selecting Elements</a
                                                    >
                                                </li>

                                                <li>
                                                    <a
                                                        href="/en-US/docs/tag/Selectors"
                                                        rel="nofollow"
                                                        >Selectors</a
                                                    >
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="contributors-sub">
                                            <svg
                                                class="icon icon-group"
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="30"
                                                height="28"
                                                viewBox="0 0 30 28"
                                                aria-hidden="true"
                                            >
                                                <path
                                                    d="M9.266 14a5.532 5.532 0 0 0-4.141 2H3.031C1.468 16 0 15.25 0 13.516 0 12.25-.047 8 1.937 8c.328 0 1.953 1.328 4.062 1.328.719 0 1.406-.125 2.078-.359A7.624 7.624 0 0 0 7.999 10c0 1.422.453 2.828 1.266 4zM26 23.953C26 26.484 24.328 28 21.828 28H8.172C5.672 28 4 26.484 4 23.953 4 20.422 4.828 15 9.406 15c.531 0 2.469 2.172 5.594 2.172S20.063 15 20.594 15C25.172 15 26 20.422 26 23.953zM10 4c0 2.203-1.797 4-4 4S2 6.203 2 4s1.797-4 4-4 4 1.797 4 4zm11 6c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6zm9 3.516C30 15.25 28.531 16 26.969 16h-2.094a5.532 5.532 0 0 0-4.141-2A7.066 7.066 0 0 0 22 10a7.6 7.6 0 0 0-.078-1.031A6.258 6.258 0 0 0 24 9.328C26.109 9.328 27.734 8 28.062 8c1.984 0 1.937 4.25 1.937 5.516zM28 4c0 2.203-1.797 4-4 4s-4-1.797-4-4 1.797-4 4-4 4 1.797 4 4z"
                                                />
                                            </svg>
                                            <strong
                                                >Contributors to this
                                                page:</strong
                                            >

                                            <a
                                                href="/en-US/profiles/mdnwebdocs-bot"
                                                rel="nofollow"
                                                >mdnwebdocs-bot</a
                                            >,

                                            <a
                                                href="/en-US/profiles/mfluehr"
                                                rel="nofollow"
                                                >mfluehr</a
                                            >,

                                            <a
                                                href="/en-US/profiles/fscholz"
                                                rel="nofollow"
                                                >fscholz</a
                                            >,

                                            <a
                                                href="/en-US/profiles/Sheppy"
                                                rel="nofollow"
                                                >Sheppy</a
                                            >,

                                            <a
                                                href="/en-US/profiles/wbamberg"
                                                rel="nofollow"
                                                >wbamberg</a
                                            >,

                                            <a
                                                href="/en-US/profiles/zombie"
                                                rel="nofollow"
                                                >zombie</a
                                            >,

                                            <a
                                                href="/en-US/profiles/DomenicDenicola"
                                                rel="nofollow"
                                                >DomenicDenicola</a
                                            >,

                                            <a
                                                href="/en-US/profiles/chrisdavidmills"
                                                rel="nofollow"
                                                >chrisdavidmills</a
                                            >,

                                            <a
                                                href="/en-US/profiles/faxchan"
                                                rel="nofollow"
                                                >faxchan</a
                                            >,

                                            <a
                                                href="/en-US/profiles/valtlai"
                                                rel="nofollow"
                                                >valtlai</a
                                            >,

                                            <a
                                                href="/en-US/profiles/HarryPehkonen"
                                                rel="nofollow"
                                                >HarryPehkonen</a
                                            >,

                                            <a
                                                href="/en-US/profiles/Jeremie"
                                                rel="nofollow"
                                                >Jeremie</a
                                            >,

                                            <a
                                                href="/en-US/profiles/stompychum"
                                                rel="nofollow"
                                                >stompychum</a
                                            >,

                                            <a
                                                href="/en-US/profiles/teoli"
                                                rel="nofollow"
                                                >teoli</a
                                            >,

                                            <a
                                                href="/en-US/profiles/tagawa"
                                                rel="nofollow"
                                                >tagawa</a
                                            >,

                                            <a
                                                href="/en-US/profiles/gregtatum"
                                                rel="nofollow"
                                                >gregtatum</a
                                            >,

                                            <a
                                                href="/en-US/profiles/Havvy"
                                                rel="nofollow"
                                                >Havvy</a
                                            >,

                                            <a
                                                href="/en-US/profiles/kscarfone"
                                                rel="nofollow"
                                                >kscarfone</a
                                            >,

                                            <a
                                                href="/en-US/profiles/iamanupmenon"
                                                rel="nofollow"
                                                >iamanupmenon</a
                                            >,

                                            <a
                                                href="/en-US/profiles/ethertank"
                                                rel="nofollow"
                                                >ethertank</a
                                            >,

                                            <a
                                                href="/en-US/profiles/mattbasta"
                                                rel="nofollow"
                                                >mattbasta</a
                                            >,

                                            <a
                                                href="/en-US/profiles/paul.irish"
                                                rel="nofollow"
                                                >paul.irish</a
                                            >,

                                            <a
                                                href="/en-US/profiles/J%C3%BCrgen%20Jeka"
                                                rel="nofollow"
                                                >Jürgen Jeka</a
                                            >,

                                            <a
                                                href="/en-US/profiles/Brettz9"
                                                rel="nofollow"
                                                >Brettz9</a
                                            >,

                                            <a
                                                href="/en-US/profiles/Bzbarsky"
                                                rel="nofollow"
                                                >Bzbarsky</a
                                            >
                                        </div>

                                        <div class="contributors-sub">
                                            <svg
                                                class="icon icon-clock"
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="24"
                                                height="28"
                                                viewBox="0 0 24 28"
                                                aria-hidden="true"
                                            >
                                                <path
                                                    d="M14 8.5v7c0 .281-.219.5-.5.5h-5a.494.494 0 0 1-.5-.5v-1c0-.281.219-.5.5-.5H12V8.5c0-.281.219-.5.5-.5h1c.281 0 .5.219.5.5zm6.5 5.5c0-4.688-3.813-8.5-8.5-8.5S3.5 9.313 3.5 14s3.813 8.5 8.5 8.5 8.5-3.813 8.5-8.5zm3.5 0c0 6.625-5.375 12-12 12S0 20.625 0 14 5.375 2 12 2s12 5.375 12 12z"
                                                />
                                            </svg>
                                            <strong>Last updated by:</strong>
                                            <a
                                                href="/en-US/profiles/mdnwebdocs-bot"
                                                rel="nofollow"
                                                >mdnwebdocs-bot</a
                                            >,
                                            <time
                                                datetime="2019-03-23T20:07:18.559940-07:00"
                                                >Mar 23, 2019, 8:07:18 PM</time
                                            >
                                        </div>
                                    </div>
                                </div>

                                <!-- quick links and approvals strip -->
                                <div
                                    id="wiki-left"
                                    class="column-strip wiki-column"
                                >
                                    <!-- crumbs -->

                                    <nav class="crumbs" role="navigation">
                                        <ol
                                            typeof="BreadcrumbList"
                                            vocab="https://schema.org/"
                                            aria-label="breadcrumbs"
                                        >
                                            <li
                                                property="itemListElement"
                                                typeof="ListItem"
                                                class="crumb"
                                            >
                                                <a
                                                    href="/en-US/docs/Web"
                                                    property="item"
                                                    typeof="WebPage"
                                                >
                                                    <span property="name"
                                                        >Web technology for
                                                        developers</span
                                                    >
                                                </a>
                                                <meta
                                                    property="position"
                                                    content="1"
                                                />
                                            </li>

                                            <li
                                                property="itemListElement"
                                                typeof="ListItem"
                                                class="crumb"
                                            >
                                                <a
                                                    href="/en-US/docs/Web/API"
                                                    property="item"
                                                    typeof="WebPage"
                                                >
                                                    <span property="name"
                                                        >Web APIs</span
                                                    >
                                                </a>
                                                <meta
                                                    property="position"
                                                    content="2"
                                                />
                                            </li>

                                            <li
                                                property="itemListElement"
                                                typeof="ListItem"
                                                class="crumb"
                                            >
                                                <a
                                                    href="/en-US/docs/Web/API/Element"
                                                    property="item"
                                                    typeof="WebPage"
                                                >
                                                    <span property="name"
                                                        >Element</span
                                                    >
                                                </a>
                                                <meta
                                                    property="position"
                                                    content="3"
                                                />
                                            </li>

                                            <li
                                                property="itemListElement"
                                                typeof="ListItem"
                                                class="crumb"
                                            >
                                                <span
                                                    property="name"
                                                    aria-current="page"
                                                    >Element.querySelector()</span
                                                >
                                            </li>
                                        </ol>
                                    </nav>

                                    <!-- quick links -->

                                    <div class="quick-links" id="quick-links">
                                        <div class="quick-links-head">
                                            Related Topics
                                        </div>
                                        <ol>
                                            <li>
                                                <strong
                                                    ><a
                                                        href="/en-US/docs/Web/API/Document_Object_Model"
                                                        >Document Object
                                                        Model</a
                                                    ></strong
                                                >
                                            </li>
                                            <li>
                                                <strong
                                                    ><a
                                                        href="/en-US/docs/Web/API/Element"
                                                        ><code>Element</code></a
                                                    ></strong
                                                >
                                            </li>
                                            <li class="toggle">
                                                <details open
                                                    ><summary
                                                        >Properties</summary
                                                    >
                                                    <ol>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/accessKey"
                                                                title="The Element.accessKey property sets the keystroke which a user can press to jump to a given element."
                                                                ><code
                                                                    >accessKey</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/attributes"
                                                                title="The Element.attributes property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap, not an Array, so it has no Array methods and the Attr nodes' indexes may differ among browsers. To be more specific, attributes is a key/value pair of strings that represents any information regarding that attribute."
                                                                ><code
                                                                    >attributes</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ParentNode/childElementCount"
                                                                title="The ParentNode.childElementCount read-only property returns an unsigned long representing the number of child elements of the given element."
                                                                ><code
                                                                    >childElementCount</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ParentNode/children"
                                                                title="The ParentNode property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called."
                                                                ><code
                                                                    >children</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/classList"
                                                                title="The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element."
                                                                ><code
                                                                    >classList</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/className"
                                                                title="The className property of the Element interface gets and sets the value of the class attribute of the specified element."
                                                                ><code
                                                                    >className</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/clientHeight"
                                                                title="The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes; otherwise, it's the inner height of an element in pixels. It includes padding but excludes borders, margins, and horizontal scrollbars (if present)."
                                                                ><code
                                                                    >clientHeight</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/clientLeft"
                                                                title="The width of the left border of an element in pixels. It includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding. clientLeft is read-only."
                                                                ><code
                                                                    >clientLeft</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/clientTop"
                                                                title="The width of the top border of an element in pixels. It is a read-only, integer property of element."
                                                                ><code
                                                                    >clientTop</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/clientWidth"
                                                                title="The Element.clientWidth property is zero for elements with no CSS or inline layout boxes; otherwise it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present)."
                                                                ><code
                                                                    >clientWidth</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/currentStyle"
                                                                title="Element.currentStyle is a proprietary property which is similar to the standardized window.getComputedStyle() method."
                                                                ><code
                                                                    >currentStyle</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ParentNode/firstElementChild"
                                                                title="The ParentNode.firstElementChild read-only property returns the object's first child Element, or null if there are no child elements."
                                                                ><code
                                                                    >firstElementChild</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/id"
                                                                title="The id property of the Element interface represents the element's identifier, reflecting the id global attribute."
                                                                ><code
                                                                    >id</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/innerHTML"
                                                                title="The Element property innerHTML gets or sets the HTML or XML markup contained within the element."
                                                                ><code
                                                                    >innerHTML</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ParentNode/lastElementChild"
                                                                title="The ParentNode.lastElementChild read-only property returns the object's last child Element or null if there are no child elements."
                                                                ><code
                                                                    >lastElementChild</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/localName"
                                                                title="The Element.localName read-only property returns the local part of the qualified name of an element."
                                                                ><code
                                                                    >localName</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/name"
                                                                title="name gets or sets the name property of an element in the DOM. It only applies to the following elements: &lt;a>, &lt;applet>, &lt;button>, &lt;form>, &lt;frame>, &lt;iframe>, &lt;img>, &lt;input>, &lt;map>, &lt;meta>, &lt;object>, &lt;param>, &lt;select>, and &lt;textarea>."
                                                                ><code
                                                                    >name</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/namespaceURI"
                                                                title="The Element.namespaceURI read-only property returns the namespace URI of the element, or null if the element is not in a namespace."
                                                                ><code
                                                                    >namespaceURI</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling"
                                                                title="The NonDocumentTypeChildNode.nextElementSibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list."
                                                                ><code
                                                                    >nextElementSibling</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/onfullscreenchange"
                                                                title="The Element interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired when the element has transitioned into or out of full-screen mode."
                                                                ><code
                                                                    >onfullscreenchange</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/onfullscreenerror"
                                                                title="The Element interface's onfullscreenerror property is an event handler for the fullscreenerror event which is sent to the element when an error occurs while attempting to transition into or out of full-screen mode."
                                                                ><code
                                                                    >onfullscreenerror</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/openOrClosedShadowRoot"
                                                                title="The Element.openOrCloseShadowRoot read-only property represents the shadow root hosted by the element, regardless if its mode is open or closed."
                                                                ><code
                                                                    >openOrClosedShadowRoot</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/outerHTML"
                                                                title="The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string."
                                                                ><code
                                                                    >outerHTML</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/prefix"
                                                                title="The Element.prefix read-only property returns the namespace prefix of the specified element, or null if no prefix is specified."
                                                                ><code
                                                                    >prefix</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling"
                                                                title="The NonDocumentTypeChildNode.previousElementSibling read-only property returns the Element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list."
                                                                ><code
                                                                    >previousElementSibling</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/runtimeStyle"
                                                                title="Element.runtimeStyle is a proprietary property similar to HTMLElement.style, except its styles, that have higher precedence and modification."
                                                                ><code
                                                                    >runtimeStyle</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/scrollHeight"
                                                                title="The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow."
                                                                ><code
                                                                    >scrollHeight</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/scrollLeft"
                                                                title="The Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled from its left edge."
                                                                ><code
                                                                    >scrollLeft</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/scrollLeftMax"
                                                                title="The Element.scrollLeftMax read-only property returns a Number representing the maximum left scroll offset possible for the element."
                                                                ><code
                                                                    >scrollLeftMax</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/scrollTop"
                                                                title="The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically."
                                                                ><code
                                                                    >scrollTop</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/scrollTopMax"
                                                                title="The Element.scrollTopMax read-only property returns a Number representing the maximum top scroll offset possible for the element."
                                                                ><code
                                                                    >scrollTopMax</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/scrollWidth"
                                                                title="The Element.scrollWidth read-only property is a measurement of the width of an element's content, including content not visible on the screen due to overflow."
                                                                ><code
                                                                    >scrollWidth</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/shadowRoot"
                                                                title="The Element.shadowRoot read-only property represents the shadow root hosted by the element."
                                                                ><code
                                                                    >shadowRoot</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/slot"
                                                                title="The slot property of the Element interface returns the name of the shadow DOM slot the element is inserted in."
                                                                ><code
                                                                    >slot</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This is an obsolete API and is no longer guaranteed to work."
                                                                    ><i
                                                                        class="icon-trash"
                                                                    >
                                                                    </i></span></span
                                                            ><s
                                                                class="obsoleteElement"
                                                                ><a
                                                                    href="/en-US/docs/Web/API/Element/tabStop"
                                                                    title="The tabStop property of the Element interface returns a Boolean indicating if the element can receive input focus via the tab key. If the specified element is a shadow host tab navigation is delegated to its children."
                                                                    ><code
                                                                        >tabStop</code
                                                                    ></a
                                                                ></s
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/tagName"
                                                                title="The tagName read-only property of the Element interface returns the tag name of the element on which it's called."
                                                                ><code
                                                                    >tagName</code
                                                                ></a
                                                            >
                                                        </li>
                                                    </ol></details
                                                >
                                            </li>
                                            <li class="toggle">
                                                <details open
                                                    ><summary>Methods</summary>
                                                    <ol>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    title="This is an experimental API that should not be used in production code."
                                                                    ><i
                                                                        class="icon-beaker"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/ChildNode/after"
                                                                title="The ChildNode.after() method inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just after this ChildNode. DOMString objects are inserted as equivalent Text nodes."
                                                                ><code
                                                                    >after()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/animate"
                                                                title="The Element interface's animate() method is a shortcut method which creates a new Animation, applies it to the element, then plays the animation. It returns the created Animation object instance."
                                                                ><code
                                                                    >animate()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    title="This is an experimental API that should not be used in production code."
                                                                    ><i
                                                                        class="icon-beaker"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/ParentNode/append"
                                                                title="The ParentNode.append() method inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes."
                                                                ><code
                                                                    >append()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/attachShadow"
                                                                title="The Element.attachShadow() method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot."
                                                                ><code
                                                                    >attachShadow()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    title="This is an experimental API that should not be used in production code."
                                                                    ><i
                                                                        class="icon-beaker"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/ChildNode/before"
                                                                title="The ChildNode.before method inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just before this ChildNode. DOMString objects are inserted as equivalent Text nodes."
                                                                ><code
                                                                    >before()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/closest"
                                                                title="For browsers that do not support Element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning IE9+), a polyfill exists:"
                                                                ><code
                                                                    >closest()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    title="This is an experimental API that should not be used in production code."
                                                                    ><i
                                                                        class="icon-beaker"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/computedStyleMap"
                                                                title="The computedStyleMap() method of the Element interface returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration. "
                                                                ><code
                                                                    >computedStyleMap()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    title="This deprecated API should no longer be used, but will probably still work."
                                                                    ><i
                                                                        class="icon-thumbs-down-alt"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/createShadowRoot"
                                                                title="Use Element.createShadowRoot to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."
                                                                ><code
                                                                    >createShadowRoot()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getAttribute"
                                                                title="The getAttribute() method of the Element interface returns the value of a specified attribute on the element."
                                                                ><code
                                                                    >getAttribute()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getAttributeNames"
                                                                title="The getAttributeNames() method of the Element interface returns the attribute names of the element as an Array of strings. If the element has no attributes it returns an empty array."
                                                                ><code
                                                                    >getAttributeNames()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getAttributeNode"
                                                                title="Returns the specified attribute of the specified element, as an Attr node."
                                                                ><code
                                                                    >getAttributeNode()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getAttributeNodeNS"
                                                                title="Returns the Attr node for the attribute with the given namespace and name."
                                                                ><code
                                                                    >getAttributeNodeNS()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getAttributeNS"
                                                                title='The getAttributeNS() method of the Element interface returns the string value of the attribute with the specified namespace and name. If the named attribute does not exist, the value returned will either be null or "" (the empty string); see Notes for details.'
                                                                ><code
                                                                    >getAttributeNS()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getBoundingClientRect"
                                                                title="The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport."
                                                                ><code
                                                                    >getBoundingClientRect()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getClientRects"
                                                                title="The getClientRects() method of the Element interface returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client."
                                                                ><code
                                                                    >getClientRects()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getElementsByClassName"
                                                                title="The Element method getElementsByClassName() returns a live HTMLCollection which contains every descendant element which has the specified class name or names."
                                                                ><code
                                                                    >getElementsByClassName()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getElementsByTagName"
                                                                title="The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name."
                                                                ><code
                                                                    >getElementsByTagName()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/getElementsByTagNameNS"
                                                                title="The Element.getElementsByTagNameNS() method returns a live HTMLCollection of elements with the given tag name belonging to the given namespace. It is similar to Document.getElementsByTagNameNS, except that its search is restricted to descendants of the specified element."
                                                                ><code
                                                                    >getElementsByTagNameNS()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/hasAttribute"
                                                                title="The Element.hasAttribute() method returns a Boolean value indicating whether the specified element has the specified attribute or not."
                                                                ><code
                                                                    >hasAttribute()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/hasAttributeNS"
                                                                title="hasAttributeNS returns a boolean value indicating whether the current element has the specified attribute."
                                                                ><code
                                                                    >hasAttributeNS()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/hasAttributes"
                                                                title="The hasAttributes() method of the Element interface returns a Boolean indicating whether the current element has any attributes or not."
                                                                ><code
                                                                    >hasAttributes()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/hasPointerCapture"
                                                                title="The hasPointerCapture() method of the Element interface sets whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID."
                                                                ><code
                                                                    >hasPointerCapture()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/insertAdjacentElement"
                                                                title="The insertAdjacentElement() method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon."
                                                                ><code
                                                                    >insertAdjacentElement()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/insertAdjacentHTML"
                                                                title="The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation."
                                                                ><code
                                                                    >insertAdjacentHTML()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/insertAdjacentText"
                                                                title="The insertAdjacentText() method of the Element interface inserts a given text node at a given position relative to the element it is invoked upon."
                                                                ><code
                                                                    >insertAdjacentText()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/matches"
                                                                title="The matches() method of the Element interface returns true if the element would be selected by the specified selector string; otherwise, it returns false."
                                                                ><code
                                                                    >matches()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/msZoomTo"
                                                                title="The msZoomTo method scrolls and/or zooms an element to its specified coordinate with animation."
                                                                ><code
                                                                    >msZoomTo()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    title="This is an experimental API that should not be used in production code."
                                                                    ><i
                                                                        class="icon-beaker"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/ParentNode/prepend"
                                                                title="The ParentNode.prepend() method inserts a set of Node objects or DOMString objects before the first child of the ParentNode. DOMString objects are inserted as equivalent Text nodes."
                                                                ><code
                                                                    >prepend()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <em
                                                                ><code
                                                                    >querySelector()</code
                                                                ></em
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ParentNode/querySelector"
                                                                title="The ParentNode mixin defines the querySelector() method as returning an Element representing the first element matching the specified group of selectors which are descendants of the object on which the method was called."
                                                                ><code
                                                                    >querySelector()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ParentNode/querySelectorAll"
                                                                title="The ParentNode mixin defines the querySelectorAll() method as returning a NodeList representing a list of elements matching the specified group of selectors which are descendants of the object on which the method was called."
                                                                ><code
                                                                    >querySelectorAll()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/querySelectorAll"
                                                                title="The Element method querySelectorAll() returns a static (not live) NodeList representing a list of elements matching the specified group of selectors which are descendants of the element on which the method was called."
                                                                ><code
                                                                    >querySelectorAll()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/releasePointerCapture"
                                                                title="The releasePointerCapture() method of the Element interface releases (stops) pointer capture that was previously set for a specific (PointerEvent) pointer."
                                                                ><code
                                                                    >releasePointerCapture()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    title="This is an experimental API that should not be used in production code."
                                                                    ><i
                                                                        class="icon-beaker"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/ChildNode/remove"
                                                                title="The ChildNode.remove() method removes the object from the tree it belongs to."
                                                                ><code
                                                                    >remove()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/removeAttribute"
                                                                title="The Element method removeAttribute() removes the attribute with the specified name from the element."
                                                                ><code
                                                                    >removeAttribute()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/removeAttributeNode"
                                                                title="The removeAttributeNode() method of the Element object removes the specified attribute from the current element."
                                                                ><code
                                                                    >removeAttributeNode()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/removeAttributeNS"
                                                                title="The removeAttributeNS() method of the Element interface removes the specified attribute from an element."
                                                                ><code
                                                                    >removeAttributeNS()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    title="This is an experimental API that should not be used in production code."
                                                                    ><i
                                                                        class="icon-beaker"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/ChildNode/replaceWith"
                                                                title="The ChildNode.replaceWith() method replaces this ChildNode in the children list of its parent with a set of Node or DOMString objects. DOMString objects are inserted as equivalent Text nodes."
                                                                ><code
                                                                    >replaceWith()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/requestFullScreen"
                                                                title="The Element.requestFullscreen() method issues an asynchronous request to make the element be displayed in full-screen mode."
                                                                ><code
                                                                    >requestFullscreen()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    title="This is an experimental API that should not be used in production code."
                                                                    ><i
                                                                        class="icon-beaker"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/requestPointerLock"
                                                                title="The Element.requestPointerLock() method lets you asynchronously ask for the pointer to be locked on the given element."
                                                                ><code
                                                                    >requestPointerLock()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/scroll"
                                                                title="The scroll() method of the Element interface scrolls the element to a particular set of coordinates inside a given element."
                                                                ><code
                                                                    >scroll()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/scrollBy"
                                                                title="The scrollBy() method of the Element interface scrolls an element by the given amount."
                                                                ><code
                                                                    >scrollBy()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/scrollIntoView"
                                                                title="The element may not be scrolled completely to the top or bottom depending on the layout of other elements."
                                                                ><code
                                                                    >scrollIntoView()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"
                                                                title="The Element.scrollIntoViewIfNeeded() method scrolls the current element into the visible area of the browser window if it's not already within the visible area of the browser window. If the element is already within the visible area of the browser window, then no scrolling takes place. This method is a proprietary variation of the standard Element.scrollIntoView() method."
                                                                ><code
                                                                    >scrollIntoViewIfNeeded()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/scrollTo"
                                                                title="The scrollTo() method of the Element interface scrolls to a particular set of coordinates inside a given element."
                                                                ><code
                                                                    >scrollTo()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/setAttribute"
                                                                title="Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value."
                                                                ><code
                                                                    >setAttribute()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/setAttributeNode"
                                                                title="The setAttributeNode() method adds a new Attr node to the specified element."
                                                                ><code
                                                                    >setAttributeNode()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/setAttributeNodeNS"
                                                                title="setAttributeNodeNS adds a new namespaced attribute node to an element."
                                                                ><code
                                                                    >setAttributeNodeNS()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/setAttributeNS"
                                                                title="setAttributeNS adds a new attribute or changes the value of an attribute with the given namespace and name."
                                                                ><code
                                                                    >setAttributeNS()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <span
                                                                class="sidebar-icon"
                                                                ><span
                                                                    class="icon-only-inline"
                                                                    title="This API has not been standardized."
                                                                    ><i
                                                                        class="icon-warning-sign"
                                                                    >
                                                                    </i></span></span
                                                            ><a
                                                                href="/en-US/docs/Web/API/Element/setCapture"
                                                                title="Call this method during the handling of a mousedown event to retarget all mouse events to this element until the mouse button is released or document.releaseCapture() is called."
                                                                ><code
                                                                    >setCapture()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/setPointerCapture"
                                                                title="The setPointerCapture() method of the Element interface is used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released (via Element.releasePointerCapture())."
                                                                ><code
                                                                    >setPointerCapture()</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Element/toggleAttribute"
                                                                title="The toggleAttribute() method of the Element interface toggles a Boolean attribute (removing it if it is present and adding it if it is not present) on the given element."
                                                                ><code
                                                                    >toggleAttribute()</code
                                                                ></a
                                                            >
                                                        </li>
                                                    </ol></details
                                                >
                                            </li>
                                            <li class="toggle">
                                                <details open
                                                    ><summary
                                                        >Inheritance:</summary
                                                    >
                                                    <ol>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Node"
                                                                ><code
                                                                    >Node</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/EventTarget"
                                                                ><code
                                                                    >EventTarget</code
                                                                ></a
                                                            >
                                                        </li>
                                                    </ol></details
                                                >
                                            </li>
                                            <li class="toggle">
                                                <details open
                                                    ><summary
                                                        >Related pages for
                                                        DOM</summary
                                                    >
                                                    <ol>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/AbortController"
                                                                ><code
                                                                    >AbortController</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/AbortSignal"
                                                                ><code
                                                                    >AbortSignal</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Attr"
                                                                ><code
                                                                    >Attr</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ByteString"
                                                                ><code
                                                                    >ByteString</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/CDATASection"
                                                                ><code
                                                                    >CDATASection</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/CSSPrimitiveValue"
                                                                ><code
                                                                    >CSSPrimitiveValue</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/CSSValue"
                                                                ><code
                                                                    >CSSValue</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/CSSValueList"
                                                                ><code
                                                                    >CSSValueList</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/CharacterData"
                                                                ><code
                                                                    >CharacterData</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ChildNode"
                                                                ><code
                                                                    >ChildNode</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Comment"
                                                                ><code
                                                                    >Comment</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/CustomEvent"
                                                                ><code
                                                                    >CustomEvent</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMConfiguration"
                                                                ><code
                                                                    >DOMConfiguration</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMError"
                                                                ><code
                                                                    >DOMError</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                class="new"
                                                                href="/en-US/docs/Web/API/DOMErrorHandler"
                                                                rel="nofollow"
                                                                ><code
                                                                    >DOMErrorHandler</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMException"
                                                                ><code
                                                                    >DOMException</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMImplementation"
                                                                ><code
                                                                    >DOMImplementation</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMImplementationList"
                                                                ><code
                                                                    >DOMImplementationList</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                class="new"
                                                                href="/en-US/docs/Web/API/DOMImplementationRegistry"
                                                                rel="nofollow"
                                                                ><code
                                                                    >DOMImplementationRegistry</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                class="new"
                                                                href="/en-US/docs/Web/API/DOMImplementationSource"
                                                                rel="nofollow"
                                                                ><code
                                                                    >DOMImplementationSource</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMLocator"
                                                                ><code
                                                                    >DOMLocator</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMObject"
                                                                ><code
                                                                    >DOMObject</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMParser"
                                                                ><code
                                                                    >DOMParser</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMPoint"
                                                                ><code
                                                                    >DOMPoint</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMPointInit"
                                                                ><code
                                                                    >DOMPointInit</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMPointReadOnly"
                                                                ><code
                                                                    >DOMPointReadOnly</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMRect"
                                                                ><code
                                                                    >DOMRect</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMString"
                                                                ><code
                                                                    >DOMString</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMTimeStamp"
                                                                ><code
                                                                    >DOMTimeStamp</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMTokenList"
                                                                ><code
                                                                    >DOMTokenList</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DOMUserData"
                                                                ><code
                                                                    >DOMUserData</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Document"
                                                                ><code
                                                                    >Document</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DocumentFragment"
                                                                ><code
                                                                    >DocumentFragment</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/DocumentType"
                                                                ><code
                                                                    >DocumentType</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ElementTraversal"
                                                                ><code
                                                                    >ElementTraversal</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                class="new"
                                                                href="/en-US/docs/Web/API/Entity"
                                                                rel="nofollow"
                                                                ><code
                                                                    >Entity</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                class="new"
                                                                href="/en-US/docs/Web/API/EntityReference"
                                                                rel="nofollow"
                                                                ><code
                                                                    >EntityReference</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Event"
                                                                ><code
                                                                    >Event</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/EventTarget"
                                                                ><code
                                                                    >EventTarget</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/HTMLCollection"
                                                                ><code
                                                                    >HTMLCollection</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/MutationObserver"
                                                                ><code
                                                                    >MutationObserver</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Node"
                                                                ><code
                                                                    >Node</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/NodeFilter"
                                                                ><code
                                                                    >NodeFilter</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/NodeIterator"
                                                                ><code
                                                                    >NodeIterator</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/NodeList"
                                                                ><code
                                                                    >NodeList</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/NonDocumentTypeChildNode"
                                                                ><code
                                                                    >NonDocumentTypeChildNode</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/ProcessingInstruction"
                                                                ><code
                                                                    >ProcessingInstruction</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/PromiseResolver"
                                                                ><code
                                                                    >PromiseResolver</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Range"
                                                                ><code
                                                                    >Range</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/Text"
                                                                ><code
                                                                    >Text</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/TextDecoder"
                                                                ><code
                                                                    >TextDecoder</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/TextEncoder"
                                                                ><code
                                                                    >TextEncoder</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/TimeRanges"
                                                                ><code
                                                                    >TimeRanges</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/TreeWalker"
                                                                ><code
                                                                    >TreeWalker</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/TypeInfo"
                                                                ><code
                                                                    >TypeInfo</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/USVString"
                                                                ><code
                                                                    >USVString</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/UserDataHandler"
                                                                ><code
                                                                    >UserDataHandler</code
                                                                ></a
                                                            >
                                                        </li>
                                                        <li>
                                                            <a
                                                                href="/en-US/docs/Web/API/XMLDocument"
                                                                ><code
                                                                    >XMLDocument</code
                                                                ></a
                                                            >
                                                        </li>
                                                    </ol></details
                                                >
                                            </li>
                                        </ol>
                                    </div>

                                    <!-- approvals -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div id="find-me" class="find-me">Find me!</div>

    

Preparation code output

<div class="wiki-main-content" id="document-main"> <div class="center"> <!-- start the main content container --> <div id="wiki-column-container" class="wiki-left-present" > <!-- content row with three strips --> <div class="column-container column-container-reverse" > <!-- center: main article content --> <div id="wiki-content" class="column-main wiki-column text-content" > <!-- just the article content --> <article id="wikiArticle"> <div></div> <p> The <code ><strong >querySelector()</strong ></code > method of the <a href="/en-US/docs/Web/API/Element" title="Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element." ><code>Element</code></a > interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors. </p> <h2 id="Syntax">Syntax</h2> <pre class="syntaxbox" ><var>element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s); </pre> <h3 id="Parameters">Parameters</h3> <dl> <dt><code>selectors</code></dt> <dd> A group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" >selectors</a > to match the descendant elements of the <a href="/en-US/docs/Web/API/Element" title="Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element." ><code>Element</code></a > <code>baseElement</code> against; this must be valid CSS syntax, or a <code>SyntaxError</code> exception will occur. The first element found which matches this group of selectors is returned. </dd> </dl> <h3 id="Return_value">Return value</h3> <p> The first descendant element of <code>baseElement</code> which matches the specified group of <code>selectors</code>. The entire hierarchy of elements is considered when matching, including those outside the set of elements including <code>baseElement</code> and its descendants; in other words, <code>selectors</code> is first applied to the whole document, not the <code>baseElement</code>, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of <code>baseElement</code>. The first match of those remaining elements is returned by the <code>querySelector()</code> method. </p> <p> If no matches are found, the returned value is <code>null</code>. </p> <h3 id="Exceptions">Exceptions</h3> <dl> <dt><code>SyntaxError</code></dt> <dd> The specified <code>selectors</code> are invalid. </dd> </dl> <h2 id="Examples">Examples</h2> <p>Let's consider a few examples.</p> <h3 id="Find_a_specific_element_with_specific_values_of_an_attribute" > Find a specific element with specific values of an attribute </h3> <p> In this first example, the first <a href="/en-US/docs/Web/HTML/Element/style" title="The HTML &lt;style> element contains style information for a document, or part of a document." ><code>&lt;style&gt;</code></a > element which either has no type or has type "text/css" in the HTML document body is returned: </p> <pre class="brush:js"> var el = document.body.querySelector("style[type='text/css'], style:not([type])"); </pre > <h3 id="The_entire_hierarchy_counts"> The entire hierarchy counts </h3> <p> This example demonstrates that the hierarchy of the entire document is considered when applying <code>selectors</code>, so that levels outside the specified <code>baseElement</code> are still considered when locating matches. </p> <h4 id="HTML">HTML</h4> <pre class="brush: html"> &lt;div&gt; &lt;h5&gt;Original content&lt;/h5&gt; &lt;p&gt; inside paragraph &lt;span&gt;inside span&lt;/span&gt; inside paragraph &lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h5&gt;Output&lt;/h5&gt; &lt;div id="output"&gt;&lt;/div&gt; &lt;/div&gt;</pre > <h4 id="JavaScript">JavaScript</h4> <pre class="brush: js"> var baseElement = document.querySelector("p"); document.getElementById("output").innerHTML = (baseElement.querySelector("div span").innerHTML);</pre > <h4 id="Result">Result</h4> <p>The result looks like this:</p> <p> <iframe class="live-sample-frame sample-code-frame" frameborder="0" height="160" id="frame_The_entire_hierarchy_counts" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/querySelector$samples/The_entire_hierarchy_counts?revision=1525178" width="600" ></iframe> </p> <p> Notice how the <code>"div span"</code> selector still successfully matches the <a href="/en-US/docs/Web/HTML/Element/span" title="The HTML &lt;span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang." ><code>&lt;span&gt;</code></a > element, even though the <code>baseElement</code>'s child nodes do not include the <a class="new" href="/en-US/docs/Web/API/Div" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!" ><code>div</code></a > element (it is still part of the specified selector). </p> <h3 id="More_examples"> More examples </h3> <p> See <a href="/en-US/docs/Web/API/Document/querySelector" title="The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned." ><code >Document.querySelector()</code ></a > for additional examples of the proper format for the <code>selectors</code>. </p> <h2 id="Specifications"> Specifications </h2> <table class="standard-table"> <thead> <tr> <th scope="col"> Specification </th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td> <a class="external" href="https://dom.spec.whatwg.org/#dom-parentnode-queryselectorall" hreflang="en" lang="en" rel="noopener" >DOM<br /><small lang="en-US" >The definition of 'querySelector()' in that specification.</small ></a > </td> <td> <span class="spec-Living" >Living Standard</span > </td> <td></td> </tr> <tr> <td> <a class="external" href="https://dev.w3.org/2006/webapi/selectors-api2/#queryselectorall" hreflang="en" lang="en" rel="noopener" >Selectors API Level 2<br /><small lang="en-US" >The definition of 'querySelectorAll()' in that specification.</small ></a > </td> <td> <span class="spec-Obsolete" >Obsolete</span > </td> <td></td> </tr> <tr> <td> <a class="external" href="https://www.w3.org/TR/selectors-api/#queryselectorall" hreflang="en" lang="en" rel="noopener" >Selectors API Level 1<br /><small lang="en-US" >The definition of 'querySelectorAll()' in that specification.</small ></a > </td> <td> <span class="spec-Obsolete" >Obsolete</span > </td> <td></td> </tr> </tbody> </table> <h2 id="Browser_compatibility"> Browser compatibility </h2> <div class="hidden"> The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener" >https://github.com/mdn/browser-compat-data</a > and send us a pull request. </div> <p></p> <div class="bc-data"> <a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener" >Update compatibility data on GitHub</a > <table class="bc-table bc-table-web" > <thead> <tr class="bc-platforms"> <td></td> <th class="bc-platform-desktop" colspan="6" > <span>Desktop</span> </th> <th class="bc-platform-mobile" colspan="7" > <span>Mobile</span> </th> </tr> <tr class="bc-browsers"> <td></td> <th class="bc-browser-chrome" > <span class="bc-head-txt-label bc-head-icon-chrome" >Chrome</span > </th> <th class="bc-browser-edge" > <span class="bc-head-txt-label bc-head-icon-edge" >Edge</span > </th> <th class="bc-browser-firefox" > <span class="bc-head-txt-label bc-head-icon-firefox" >Firefox</span > </th> <th class="bc-browser-ie" > <span class="bc-head-txt-label bc-head-icon-ie" >Internet Explorer</span > </th> <th class="bc-browser-opera" > <span class="bc-head-txt-label bc-head-icon-opera" >Opera</span > </th> <th class="bc-browser-safari" > <span class="bc-head-txt-label bc-head-icon-safari" >Safari</span > </th> <th class="bc-browser-webview_android" > <span class="bc-head-txt-label bc-head-icon-webview_android" >Android webview</span > </th> <th class="bc-browser-chrome_android" > <span class="bc-head-txt-label bc-head-icon-chrome_android" >Chrome for Android</span > </th> <th class="bc-browser-edge_mobile" > <span class="bc-head-txt-label bc-head-icon-edge_mobile" >Edge Mobile</span > </th> <th class="bc-browser-firefox_android" > <span class="bc-head-txt-label bc-head-icon-firefox_android" >Firefox for Android</span > </th> <th class="bc-browser-opera_android" > <span class="bc-head-txt-label bc-head-icon-opera_android" >Opera for Android</span > </th> <th class="bc-browser-safari_ios" > <span class="bc-head-txt-label bc-head-icon-safari_ios" >Safari on iOS</span > </th> <th class="bc-browser-samsunginternet_android" > <span class="bc-head-txt-label bc-head-icon-samsunginternet_android" >Samsung Internet</span > </th> </tr> </thead> <tbody> <tr> <th scope="row"> <code >querySelector</code > </th> <td class="bc-supports-yes bc-browser-chrome" > <span class="bc-browser-name" >Chrome</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> 1 </td> <td class="bc-supports-yes bc-browser-edge" > <span class="bc-browser-name" >Edge</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> 12 </td> <td class="bc-supports-yes bc-browser-firefox" > <span class="bc-browser-name" >Firefox</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> 3.5 </td> <td class="bc-supports-yes bc-browser-ie bc-has-history" > <span class="bc-browser-name" >IE</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> 9 <div class="bc-icons" ></div> <section class="bc-history" id="sect1" > <dl> <dt class="bc-supports-yes bc-supports" > <abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> 9 <div class="bc-icons" ></div> </dt> <dd></dd> <dt class="bc-supports-partial bc-supports" > <abbr class="bc-level-partial only-icon" title="Partial support" > <span >Partial support</span > </abbr >8 <div class="bc-icons" > <abbr class="only-icon" title="See implementation notes" ><span >Notes</span ><i class="ic-footnote" ></i ></abbr> </div> </dt> <dd> <abbr class="only-icon" title="See implementation notes" ><span >Notes</span ><i class="ic-footnote" ></i ></abbr> <code >querySelector()</code > is supported, but only for CSS 2.1 selectors. </dd> </dl> </section> </td> <td class="bc-supports-yes bc-browser-opera" > <span class="bc-browser-name" >Opera</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> Yes </td> <td class="bc-supports-yes bc-browser-safari" > <span class="bc-browser-name" >Safari</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> 6 </td> <td class="bc-supports-yes bc-browser-webview_android" > <span class="bc-browser-name" >WebView Android</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> Yes </td> <td class="bc-supports-yes bc-browser-chrome_android" > <span class="bc-browser-name" >Chrome Android</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> Yes </td> <td class="bc-supports-yes bc-browser-edge_mobile" > <span class="bc-browser-name" >Edge Mobile</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> Yes </td> <td class="bc-supports-yes bc-browser-firefox_android" > <span class="bc-browser-name" >Firefox Android</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> Yes </td> <td class="bc-supports-yes bc-browser-opera_android" > <span class="bc-browser-name" >Opera Android</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> Yes </td> <td class="bc-supports-yes bc-browser-safari_ios" > <span class="bc-browser-name" >Safari iOS</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> Yes </td> <td class="bc-supports-yes bc-browser-samsunginternet_android" > <span class="bc-browser-name" >Samsung Internet Android</span ><abbr class="bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr> Yes </td> </tr> </tbody> </table> <section class="bc-legend" id="sect2" > <h3 class="offscreen" id="Legend" > Legend </h3> <dl> <dt> <span class="bc-supports-yes bc-supports" > <abbr class="bc-level bc-level-yes only-icon" title="Full support" > <span >Full support</span > </abbr></span > </dt> <dd>Full support</dd> <dt> <abbr class="only-icon" title="See implementation notes." ><span >See implementation notes.</span ><i class="ic-footnote" ></i ></abbr> </dt> <dd> See implementation notes. </dd> </dl> </section> </div> <p></p> <h2 id="See_also">See also</h2> <ul> <li> <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors" >Locating DOM elements using selectors</a > </li> <li> <a href="/en-US/docs/Web/CSS/Attribute_selectors" >Attribute selectors</a > in the CSS Guide </li> <li> <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors" >Attribute selectors</a > in the MDN Learning Area </li> <li> <a href="/en-US/docs/Web/API/Element/querySelectorAll" title="The Element method querySelectorAll() returns a static (not live) NodeList representing a list of elements matching the specified group of selectors which are descendants of the element on which the method was called." ><code >Element.querySelectorAll()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Document/querySelector" title="The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned." ><code >Document.querySelector()</code ></a > and <a href="/en-US/docs/Web/API/Document/querySelectorAll" title="The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors." ><code >Document.querySelectorAll()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DocumentFragment/querySelector" title="The DocumentFragment.querySelector() method returns the first element, or null if no matches are found, within the DocumentFragment (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors." ><code >DocumentFragment.querySelector()</code ></a > and <a href="/en-US/docs/Web/API/DocumentFragment/querySelectorAll" title="The DocumentFragment.querySelectorAll() method returns a NodeList of elements within the DocumentFragment (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors." ><code >DocumentFragment.querySelectorAll()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ParentNode/querySelector" title="The ParentNode mixin defines the querySelector() method as returning an Element representing the first element matching the specified group of selectors which are descendants of the object on which the method was called." ><code >ParentNode.querySelector()</code ></a > and <a href="/en-US/docs/Web/API/ParentNode/querySelectorAll" title="The ParentNode mixin defines the querySelectorAll() method as returning a NodeList representing a list of elements matching the specified group of selectors which are descendants of the object on which the method was called." ><code >ParentNode.querySelectorAll()</code ></a > </li> <li> <a href="/en-US/docs/Code_snippets/QuerySelector" >Code snippets for querySelector</a > </li> <li> Other methods that take selectors: <a href="/en-US/docs/Web/API/Element/closest" title="For browsers that do not support Element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning IE9+), a polyfill exists:" ><code >element.closest()</code ></a > and <a href="/en-US/docs/Web/API/Element/matches" title="The matches() method of the Element interface returns true if the element would be selected by the specified selector string; otherwise, it returns false." ><code >element.matches()</code ></a >. </li> </ul> </article> <!-- contributors --> <div class="wiki-block contributors"> <h2 class="offscreen"> Document Tags and Contributors </h2> <div class="tag-attach-list contributors-sub" > <svg class="icon icon-tags" xmlns="http://www.w3.org/2000/svg" width="30" height="28" viewBox="0 0 30 28" aria-hidden="true" > <path d="M7 7c0-1.109-.891-2-2-2s-2 .891-2 2 .891 2 2 2 2-.891 2-2zm16.672 9c0 .531-.219 1.047-.578 1.406l-7.672 7.688c-.375.359-.891.578-1.422.578s-1.047-.219-1.406-.578L1.422 13.906C.625 13.125 0 11.609 0 10.5V4c0-1.094.906-2 2-2h6.5c1.109 0 2.625.625 3.422 1.422l11.172 11.156c.359.375.578.891.578 1.422zm6 0c0 .531-.219 1.047-.578 1.406l-7.672 7.688a2.08 2.08 0 0 1-1.422.578c-.812 0-1.219-.375-1.75-.922l7.344-7.344c.359-.359.578-.875.578-1.406s-.219-1.047-.578-1.422L14.422 3.422C13.625 2.625 12.11 2 11 2h3.5c1.109 0 2.625.625 3.422 1.422l11.172 11.156c.359.375.578.891.578 1.422z" /> </svg> <strong>Tags:</strong>&nbsp; <ul class="tags tags-small"> <li> <a href="/en-US/docs/tag/API" rel="nofollow" >API</a > </li> <li> <a href="/en-US/docs/tag/CSS" rel="nofollow" >CSS</a > </li> <li> <a href="/en-US/docs/tag/CSS%20Selectors" rel="nofollow" >CSS Selectors</a > </li> <li> <a href="/en-US/docs/tag/DOM" rel="nofollow" >DOM</a > </li> <li> <a href="/en-US/docs/tag/Element" rel="nofollow" >Element</a > </li> <li> <a href="/en-US/docs/tag/Elements" rel="nofollow" >Elements</a > </li> <li> <a href="/en-US/docs/tag/Finding%20Elements" rel="nofollow" >Finding Elements</a > </li> <li> <a href="/en-US/docs/tag/Locating%20Elements" rel="nofollow" >Locating Elements</a > </li> <li> <a href="/en-US/docs/tag/Method" rel="nofollow" >Method</a > </li> <li> <a href="/en-US/docs/tag/querySelector" rel="nofollow" >querySelector</a > </li> <li> <a href="/en-US/docs/tag/Reference" rel="nofollow" >Reference</a > </li> <li> <a href="/en-US/docs/tag/Searching%20Elements" rel="nofollow" >Searching Elements</a > </li> <li> <a href="/en-US/docs/tag/Selecting%20Elements" rel="nofollow" >Selecting Elements</a > </li> <li> <a href="/en-US/docs/tag/Selectors" rel="nofollow" >Selectors</a > </li> </ul> </div> <div class="contributors-sub"> <svg class="icon icon-group" xmlns="http://www.w3.org/2000/svg" width="30" height="28" viewBox="0 0 30 28" aria-hidden="true" > <path d="M9.266 14a5.532 5.532 0 0 0-4.141 2H3.031C1.468 16 0 15.25 0 13.516 0 12.25-.047 8 1.937 8c.328 0 1.953 1.328 4.062 1.328.719 0 1.406-.125 2.078-.359A7.624 7.624 0 0 0 7.999 10c0 1.422.453 2.828 1.266 4zM26 23.953C26 26.484 24.328 28 21.828 28H8.172C5.672 28 4 26.484 4 23.953 4 20.422 4.828 15 9.406 15c.531 0 2.469 2.172 5.594 2.172S20.063 15 20.594 15C25.172 15 26 20.422 26 23.953zM10 4c0 2.203-1.797 4-4 4S2 6.203 2 4s1.797-4 4-4 4 1.797 4 4zm11 6c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6zm9 3.516C30 15.25 28.531 16 26.969 16h-2.094a5.532 5.532 0 0 0-4.141-2A7.066 7.066 0 0 0 22 10a7.6 7.6 0 0 0-.078-1.031A6.258 6.258 0 0 0 24 9.328C26.109 9.328 27.734 8 28.062 8c1.984 0 1.937 4.25 1.937 5.516zM28 4c0 2.203-1.797 4-4 4s-4-1.797-4-4 1.797-4 4-4 4 1.797 4 4z" /> </svg> <strong >Contributors to this page:</strong > <a href="/en-US/profiles/mdnwebdocs-bot" rel="nofollow" >mdnwebdocs-bot</a >, <a href="/en-US/profiles/mfluehr" rel="nofollow" >mfluehr</a >, <a href="/en-US/profiles/fscholz" rel="nofollow" >fscholz</a >, <a href="/en-US/profiles/Sheppy" rel="nofollow" >Sheppy</a >, <a href="/en-US/profiles/wbamberg" rel="nofollow" >wbamberg</a >, <a href="/en-US/profiles/zombie" rel="nofollow" >zombie</a >, <a href="/en-US/profiles/DomenicDenicola" rel="nofollow" >DomenicDenicola</a >, <a href="/en-US/profiles/chrisdavidmills" rel="nofollow" >chrisdavidmills</a >, <a href="/en-US/profiles/faxchan" rel="nofollow" >faxchan</a >, <a href="/en-US/profiles/valtlai" rel="nofollow" >valtlai</a >, <a href="/en-US/profiles/HarryPehkonen" rel="nofollow" >HarryPehkonen</a >, <a href="/en-US/profiles/Jeremie" rel="nofollow" >Jeremie</a >, <a href="/en-US/profiles/stompychum" rel="nofollow" >stompychum</a >, <a href="/en-US/profiles/teoli" rel="nofollow" >teoli</a >, <a href="/en-US/profiles/tagawa" rel="nofollow" >tagawa</a >, <a href="/en-US/profiles/gregtatum" rel="nofollow" >gregtatum</a >, <a href="/en-US/profiles/Havvy" rel="nofollow" >Havvy</a >, <a href="/en-US/profiles/kscarfone" rel="nofollow" >kscarfone</a >, <a href="/en-US/profiles/iamanupmenon" rel="nofollow" >iamanupmenon</a >, <a href="/en-US/profiles/ethertank" rel="nofollow" >ethertank</a >, <a href="/en-US/profiles/mattbasta" rel="nofollow" >mattbasta</a >, <a href="/en-US/profiles/paul.irish" rel="nofollow" >paul.irish</a >, <a href="/en-US/profiles/J%C3%BCrgen%20Jeka" rel="nofollow" >Jürgen Jeka</a >, <a href="/en-US/profiles/Brettz9" rel="nofollow" >Brettz9</a >, <a href="/en-US/profiles/Bzbarsky" rel="nofollow" >Bzbarsky</a > </div> <div class="contributors-sub"> <svg class="icon icon-clock" xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 24 28" aria-hidden="true" > <path d="M14 8.5v7c0 .281-.219.5-.5.5h-5a.494.494 0 0 1-.5-.5v-1c0-.281.219-.5.5-.5H12V8.5c0-.281.219-.5.5-.5h1c.281 0 .5.219.5.5zm6.5 5.5c0-4.688-3.813-8.5-8.5-8.5S3.5 9.313 3.5 14s3.813 8.5 8.5 8.5 8.5-3.813 8.5-8.5zm3.5 0c0 6.625-5.375 12-12 12S0 20.625 0 14 5.375 2 12 2s12 5.375 12 12z" /> </svg> <strong>Last updated by:</strong> <a href="/en-US/profiles/mdnwebdocs-bot" rel="nofollow" >mdnwebdocs-bot</a >, <time datetime="2019-03-23T20:07:18.559940-07:00" >Mar 23, 2019, 8:07:18 PM</time > </div> </div> </div> <!-- quick links and approvals strip --> <div id="wiki-left" class="column-strip wiki-column" > <!-- crumbs --> <nav class="crumbs" role="navigation"> <ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs" > <li property="itemListElement" typeof="ListItem" class="crumb" > <a href="/en-US/docs/Web" property="item" typeof="WebPage" > <span property="name" >Web technology for developers</span > </a> <meta property="position" content="1" /> </li> <li property="itemListElement" typeof="ListItem" class="crumb" > <a href="/en-US/docs/Web/API" property="item" typeof="WebPage" > <span property="name" >Web APIs</span > </a> <meta property="position" content="2" /> </li> <li property="itemListElement" typeof="ListItem" class="crumb" > <a href="/en-US/docs/Web/API/Element" property="item" typeof="WebPage" > <span property="name" >Element</span > </a> <meta property="position" content="3" /> </li> <li property="itemListElement" typeof="ListItem" class="crumb" > <span property="name" aria-current="page" >Element.querySelector()</span > </li> </ol> </nav> <!-- quick links --> <div class="quick-links" id="quick-links"> <div class="quick-links-head"> Related Topics </div> <ol> <li> <strong ><a href="/en-US/docs/Web/API/Document_Object_Model" >Document Object Model</a ></strong > </li> <li> <strong ><a href="/en-US/docs/Web/API/Element" ><code>Element</code></a ></strong > </li> <li class="toggle"> <details open ><summary >Properties</summary > <ol> <li> <a href="/en-US/docs/Web/API/Element/accessKey" title="The Element.accessKey property sets the keystroke which a user can press to jump to a given element." ><code >accessKey</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/attributes" title="The Element.attributes property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap, not an Array, so it has no Array methods and the Attr nodes' indexes may differ among browsers. To be more specific, attributes is a key/value pair of strings that represents any information regarding that attribute." ><code >attributes</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ParentNode/childElementCount" title="The ParentNode.childElementCount read-only property returns an unsigned long representing the number of child elements of the given element." ><code >childElementCount</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ParentNode/children" title="The ParentNode property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called." ><code >children</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/classList" title="The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element." ><code >classList</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/className" title="The className property of the Element interface gets and sets the value of the class attribute of the specified element." ><code >className</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/clientHeight" title="The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes; otherwise, it's the inner height of an element in pixels. It includes padding but excludes borders, margins, and horizontal scrollbars (if present)." ><code >clientHeight</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/clientLeft" title="The width of the left border of an element in pixels. It includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding. clientLeft is read-only." ><code >clientLeft</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/clientTop" title="The width of the top border of an element in pixels. It is a read-only, integer property of element." ><code >clientTop</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/clientWidth" title="The Element.clientWidth property is zero for elements with no CSS or inline layout boxes; otherwise it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present)." ><code >clientWidth</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><a href="/en-US/docs/Web/API/Element/currentStyle" title="Element.currentStyle is a proprietary property which is similar to the standardized window.getComputedStyle() method." ><code >currentStyle</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ParentNode/firstElementChild" title="The ParentNode.firstElementChild read-only property returns the object's first child Element, or null if there are no child elements." ><code >firstElementChild</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/id" title="The id property of the Element interface represents the element's identifier, reflecting the id global attribute." ><code >id</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/innerHTML" title="The Element property innerHTML gets or sets the HTML or XML markup contained within the element." ><code >innerHTML</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ParentNode/lastElementChild" title="The ParentNode.lastElementChild read-only property returns the object's last child Element or null if there are no child elements." ><code >lastElementChild</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/localName" title="The Element.localName read-only property returns the local part of the qualified name of an element." ><code >localName</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/name" title="name gets or sets the name property of an element in the DOM. It only applies to the following elements: &lt;a>, &lt;applet>, &lt;button>, &lt;form>, &lt;frame>, &lt;iframe>, &lt;img>, &lt;input>, &lt;map>, &lt;meta>, &lt;object>, &lt;param>, &lt;select>, and &lt;textarea>." ><code >name</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/namespaceURI" title="The Element.namespaceURI read-only property returns the namespace URI of the element, or null if the element is not in a namespace." ><code >namespaceURI</code ></a > </li> <li> <a href="/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling" title="The NonDocumentTypeChildNode.nextElementSibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list." ><code >nextElementSibling</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/onfullscreenchange" title="The Element interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired when the element has transitioned into or out of full-screen mode." ><code >onfullscreenchange</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/onfullscreenerror" title="The Element interface's onfullscreenerror property is an event handler for the fullscreenerror event which is sent to the element when an error occurs while attempting to transition into or out of full-screen mode." ><code >onfullscreenerror</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><a href="/en-US/docs/Web/API/Element/openOrClosedShadowRoot" title="The Element.openOrCloseShadowRoot read-only property represents the shadow root hosted by the element, regardless if its mode is open or closed." ><code >openOrClosedShadowRoot</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/outerHTML" title="The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string." ><code >outerHTML</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/prefix" title="The Element.prefix read-only property returns the namespace prefix of the specified element, or null if no prefix is specified." ><code >prefix</code ></a > </li> <li> <a href="/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling" title="The NonDocumentTypeChildNode.previousElementSibling read-only property returns the Element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list." ><code >previousElementSibling</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><a href="/en-US/docs/Web/API/Element/runtimeStyle" title="Element.runtimeStyle is a proprietary property similar to HTMLElement.style, except its styles, that have higher precedence and modification." ><code >runtimeStyle</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/scrollHeight" title="The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow." ><code >scrollHeight</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/scrollLeft" title="The Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled from its left edge." ><code >scrollLeft</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><a href="/en-US/docs/Web/API/Element/scrollLeftMax" title="The Element.scrollLeftMax read-only property returns a Number representing the maximum left scroll offset possible for the element." ><code >scrollLeftMax</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/scrollTop" title="The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically." ><code >scrollTop</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><a href="/en-US/docs/Web/API/Element/scrollTopMax" title="The Element.scrollTopMax read-only property returns a Number representing the maximum top scroll offset possible for the element." ><code >scrollTopMax</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/scrollWidth" title="The Element.scrollWidth read-only property is a measurement of the width of an element's content, including content not visible on the screen due to overflow." ><code >scrollWidth</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/shadowRoot" title="The Element.shadowRoot read-only property represents the shadow root hosted by the element." ><code >shadowRoot</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/slot" title="The slot property of the Element interface returns the name of the shadow DOM slot the element is inserted in." ><code >slot</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><span class="sidebar-icon" ><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work." ><i class="icon-trash" > </i></span></span ><s class="obsoleteElement" ><a href="/en-US/docs/Web/API/Element/tabStop" title="The tabStop property of the Element interface returns a Boolean indicating if the element can receive input focus via the tab key. If the specified element is a shadow host tab navigation is delegated to its children." ><code >tabStop</code ></a ></s > </li> <li> <a href="/en-US/docs/Web/API/Element/tagName" title="The tagName read-only property of the Element interface returns the tag name of the element on which it's called." ><code >tagName</code ></a > </li> </ol></details > </li> <li class="toggle"> <details open ><summary>Methods</summary> <ol> <li> <span class="sidebar-icon" ><span title="This is an experimental API that should not be used in production code." ><i class="icon-beaker" > </i></span></span ><a href="/en-US/docs/Web/API/ChildNode/after" title="The ChildNode.after() method inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just after this ChildNode. DOMString objects are inserted as equivalent Text nodes." ><code >after()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/animate" title="The Element interface's animate() method is a shortcut method which creates a new Animation, applies it to the element, then plays the animation. It returns the created Animation object instance." ><code >animate()</code ></a > </li> <li> <span class="sidebar-icon" ><span title="This is an experimental API that should not be used in production code." ><i class="icon-beaker" > </i></span></span ><a href="/en-US/docs/Web/API/ParentNode/append" title="The ParentNode.append() method inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes." ><code >append()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/attachShadow" title="The Element.attachShadow() method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot." ><code >attachShadow()</code ></a > </li> <li> <span class="sidebar-icon" ><span title="This is an experimental API that should not be used in production code." ><i class="icon-beaker" > </i></span></span ><a href="/en-US/docs/Web/API/ChildNode/before" title="The ChildNode.before method inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just before this ChildNode. DOMString objects are inserted as equivalent Text nodes." ><code >before()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/closest" title="For browsers that do not support Element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning IE9+), a polyfill exists:" ><code >closest()</code ></a > </li> <li> <span class="sidebar-icon" ><span title="This is an experimental API that should not be used in production code." ><i class="icon-beaker" > </i></span></span ><a href="/en-US/docs/Web/API/Element/computedStyleMap" title="The computedStyleMap() method of the Element interface returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration. " ><code >computedStyleMap()</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><span class="sidebar-icon" ><span title="This deprecated API should no longer be used, but will probably still work." ><i class="icon-thumbs-down-alt" > </i></span></span ><a href="/en-US/docs/Web/API/Element/createShadowRoot" title="Use Element.createShadowRoot to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root." ><code >createShadowRoot()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getAttribute" title="The getAttribute() method of the Element interface returns the value of a specified attribute on the element." ><code >getAttribute()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getAttributeNames" title="The getAttributeNames() method of the Element interface returns the attribute names of the element as an Array of strings. If the element has no attributes it returns an empty array." ><code >getAttributeNames()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getAttributeNode" title="Returns the specified attribute of the specified element, as an Attr node." ><code >getAttributeNode()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getAttributeNodeNS" title="Returns the Attr node for the attribute with the given namespace and name." ><code >getAttributeNodeNS()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getAttributeNS" title='The getAttributeNS() method of the Element interface returns the string value of the attribute with the specified namespace and name. If the named attribute does not exist, the value returned will either be null or "" (the empty string); see Notes for details.' ><code >getAttributeNS()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getBoundingClientRect" title="The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport." ><code >getBoundingClientRect()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getClientRects" title="The getClientRects() method of the Element interface returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client." ><code >getClientRects()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getElementsByClassName" title="The Element method getElementsByClassName() returns a live HTMLCollection which contains every descendant element which has the specified class name or names." ><code >getElementsByClassName()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getElementsByTagName" title="The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name." ><code >getElementsByTagName()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/getElementsByTagNameNS" title="The Element.getElementsByTagNameNS() method returns a live HTMLCollection of elements with the given tag name belonging to the given namespace. It is similar to Document.getElementsByTagNameNS, except that its search is restricted to descendants of the specified element." ><code >getElementsByTagNameNS()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/hasAttribute" title="The Element.hasAttribute() method returns a Boolean value indicating whether the specified element has the specified attribute or not." ><code >hasAttribute()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/hasAttributeNS" title="hasAttributeNS returns a boolean value indicating whether the current element has the specified attribute." ><code >hasAttributeNS()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/hasAttributes" title="The hasAttributes() method of the Element interface returns a Boolean indicating whether the current element has any attributes or not." ><code >hasAttributes()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/hasPointerCapture" title="The hasPointerCapture() method of the Element interface sets whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID." ><code >hasPointerCapture()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/insertAdjacentElement" title="The insertAdjacentElement() method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon." ><code >insertAdjacentElement()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/insertAdjacentHTML" title="The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation." ><code >insertAdjacentHTML()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/insertAdjacentText" title="The insertAdjacentText() method of the Element interface inserts a given text node at a given position relative to the element it is invoked upon." ><code >insertAdjacentText()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/matches" title="The matches() method of the Element interface returns true if the element would be selected by the specified selector string; otherwise, it returns false." ><code >matches()</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><a href="/en-US/docs/Web/API/Element/msZoomTo" title="The msZoomTo method scrolls and/or zooms an element to its specified coordinate with animation." ><code >msZoomTo()</code ></a > </li> <li> <span class="sidebar-icon" ><span title="This is an experimental API that should not be used in production code." ><i class="icon-beaker" > </i></span></span ><a href="/en-US/docs/Web/API/ParentNode/prepend" title="The ParentNode.prepend() method inserts a set of Node objects or DOMString objects before the first child of the ParentNode. DOMString objects are inserted as equivalent Text nodes." ><code >prepend()</code ></a > </li> <li> <em ><code >querySelector()</code ></em > </li> <li> <a href="/en-US/docs/Web/API/ParentNode/querySelector" title="The ParentNode mixin defines the querySelector() method as returning an Element representing the first element matching the specified group of selectors which are descendants of the object on which the method was called." ><code >querySelector()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ParentNode/querySelectorAll" title="The ParentNode mixin defines the querySelectorAll() method as returning a NodeList representing a list of elements matching the specified group of selectors which are descendants of the object on which the method was called." ><code >querySelectorAll()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/querySelectorAll" title="The Element method querySelectorAll() returns a static (not live) NodeList representing a list of elements matching the specified group of selectors which are descendants of the element on which the method was called." ><code >querySelectorAll()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/releasePointerCapture" title="The releasePointerCapture() method of the Element interface releases (stops) pointer capture that was previously set for a specific (PointerEvent) pointer." ><code >releasePointerCapture()</code ></a > </li> <li> <span class="sidebar-icon" ><span title="This is an experimental API that should not be used in production code." ><i class="icon-beaker" > </i></span></span ><a href="/en-US/docs/Web/API/ChildNode/remove" title="The ChildNode.remove() method removes the object from the tree it belongs to." ><code >remove()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/removeAttribute" title="The Element method removeAttribute() removes the attribute with the specified name from the element." ><code >removeAttribute()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/removeAttributeNode" title="The removeAttributeNode() method of the Element object removes the specified attribute from the current element." ><code >removeAttributeNode()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/removeAttributeNS" title="The removeAttributeNS() method of the Element interface removes the specified attribute from an element." ><code >removeAttributeNS()</code ></a > </li> <li> <span class="sidebar-icon" ><span title="This is an experimental API that should not be used in production code." ><i class="icon-beaker" > </i></span></span ><a href="/en-US/docs/Web/API/ChildNode/replaceWith" title="The ChildNode.replaceWith() method replaces this ChildNode in the children list of its parent with a set of Node or DOMString objects. DOMString objects are inserted as equivalent Text nodes." ><code >replaceWith()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/requestFullScreen" title="The Element.requestFullscreen() method issues an asynchronous request to make the element be displayed in full-screen mode." ><code >requestFullscreen()</code ></a > </li> <li> <span class="sidebar-icon" ><span title="This is an experimental API that should not be used in production code." ><i class="icon-beaker" > </i></span></span ><a href="/en-US/docs/Web/API/Element/requestPointerLock" title="The Element.requestPointerLock() method lets you asynchronously ask for the pointer to be locked on the given element." ><code >requestPointerLock()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/scroll" title="The scroll() method of the Element interface scrolls the element to a particular set of coordinates inside a given element." ><code >scroll()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/scrollBy" title="The scrollBy() method of the Element interface scrolls an element by the given amount." ><code >scrollBy()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/scrollIntoView" title="The element may not be scrolled completely to the top or bottom depending on the layout of other elements." ><code >scrollIntoView()</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded" title="The Element.scrollIntoViewIfNeeded() method scrolls the current element into the visible area of the browser window if it's not already within the visible area of the browser window. If the element is already within the visible area of the browser window, then no scrolling takes place. This method is a proprietary variation of the standard Element.scrollIntoView() method." ><code >scrollIntoViewIfNeeded()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/scrollTo" title="The scrollTo() method of the Element interface scrolls to a particular set of coordinates inside a given element." ><code >scrollTo()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/setAttribute" title="Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value." ><code >setAttribute()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/setAttributeNode" title="The setAttributeNode() method adds a new Attr node to the specified element." ><code >setAttributeNode()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/setAttributeNodeNS" title="setAttributeNodeNS adds a new namespaced attribute node to an element." ><code >setAttributeNodeNS()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/setAttributeNS" title="setAttributeNS adds a new attribute or changes the value of an attribute with the given namespace and name." ><code >setAttributeNS()</code ></a > </li> <li> <span class="sidebar-icon" ><span class="icon-only-inline" title="This API has not been standardized." ><i class="icon-warning-sign" > </i></span></span ><a href="/en-US/docs/Web/API/Element/setCapture" title="Call this method during the handling of a mousedown event to retarget all mouse events to this element until the mouse button is released or document.releaseCapture() is called." ><code >setCapture()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/setPointerCapture" title="The setPointerCapture() method of the Element interface is used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released (via Element.releasePointerCapture())." ><code >setPointerCapture()</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Element/toggleAttribute" title="The toggleAttribute() method of the Element interface toggles a Boolean attribute (removing it if it is present and adding it if it is not present) on the given element." ><code >toggleAttribute()</code ></a > </li> </ol></details > </li> <li class="toggle"> <details open ><summary >Inheritance:</summary > <ol> <li> <a href="/en-US/docs/Web/API/Node" ><code >Node</code ></a > </li> <li> <a href="/en-US/docs/Web/API/EventTarget" ><code >EventTarget</code ></a > </li> </ol></details > </li> <li class="toggle"> <details open ><summary >Related pages for DOM</summary > <ol> <li> <a href="/en-US/docs/Web/API/AbortController" ><code >AbortController</code ></a > </li> <li> <a href="/en-US/docs/Web/API/AbortSignal" ><code >AbortSignal</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Attr" ><code >Attr</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ByteString" ><code >ByteString</code ></a > </li> <li> <a href="/en-US/docs/Web/API/CDATASection" ><code >CDATASection</code ></a > </li> <li> <a href="/en-US/docs/Web/API/CSSPrimitiveValue" ><code >CSSPrimitiveValue</code ></a > </li> <li> <a href="/en-US/docs/Web/API/CSSValue" ><code >CSSValue</code ></a > </li> <li> <a href="/en-US/docs/Web/API/CSSValueList" ><code >CSSValueList</code ></a > </li> <li> <a href="/en-US/docs/Web/API/CharacterData" ><code >CharacterData</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ChildNode" ><code >ChildNode</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Comment" ><code >Comment</code ></a > </li> <li> <a href="/en-US/docs/Web/API/CustomEvent" ><code >CustomEvent</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMConfiguration" ><code >DOMConfiguration</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMError" ><code >DOMError</code ></a > </li> <li> <a class="new" href="/en-US/docs/Web/API/DOMErrorHandler" rel="nofollow" ><code >DOMErrorHandler</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMException" ><code >DOMException</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMImplementation" ><code >DOMImplementation</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMImplementationList" ><code >DOMImplementationList</code ></a > </li> <li> <a class="new" href="/en-US/docs/Web/API/DOMImplementationRegistry" rel="nofollow" ><code >DOMImplementationRegistry</code ></a > </li> <li> <a class="new" href="/en-US/docs/Web/API/DOMImplementationSource" rel="nofollow" ><code >DOMImplementationSource</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMLocator" ><code >DOMLocator</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMObject" ><code >DOMObject</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMParser" ><code >DOMParser</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMPoint" ><code >DOMPoint</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMPointInit" ><code >DOMPointInit</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMPointReadOnly" ><code >DOMPointReadOnly</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMRect" ><code >DOMRect</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMString" ><code >DOMString</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMTimeStamp" ><code >DOMTimeStamp</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMTokenList" ><code >DOMTokenList</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DOMUserData" ><code >DOMUserData</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Document" ><code >Document</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DocumentFragment" ><code >DocumentFragment</code ></a > </li> <li> <a href="/en-US/docs/Web/API/DocumentType" ><code >DocumentType</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ElementTraversal" ><code >ElementTraversal</code ></a > </li> <li> <a class="new" href="/en-US/docs/Web/API/Entity" rel="nofollow" ><code >Entity</code ></a > </li> <li> <a class="new" href="/en-US/docs/Web/API/EntityReference" rel="nofollow" ><code >EntityReference</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Event" ><code >Event</code ></a > </li> <li> <a href="/en-US/docs/Web/API/EventTarget" ><code >EventTarget</code ></a > </li> <li> <a href="/en-US/docs/Web/API/HTMLCollection" ><code >HTMLCollection</code ></a > </li> <li> <a href="/en-US/docs/Web/API/MutationObserver" ><code >MutationObserver</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Node" ><code >Node</code ></a > </li> <li> <a href="/en-US/docs/Web/API/NodeFilter" ><code >NodeFilter</code ></a > </li> <li> <a href="/en-US/docs/Web/API/NodeIterator" ><code >NodeIterator</code ></a > </li> <li> <a href="/en-US/docs/Web/API/NodeList" ><code >NodeList</code ></a > </li> <li> <a href="/en-US/docs/Web/API/NonDocumentTypeChildNode" ><code >NonDocumentTypeChildNode</code ></a > </li> <li> <a href="/en-US/docs/Web/API/ProcessingInstruction" ><code >ProcessingInstruction</code ></a > </li> <li> <a href="/en-US/docs/Web/API/PromiseResolver" ><code >PromiseResolver</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Range" ><code >Range</code ></a > </li> <li> <a href="/en-US/docs/Web/API/Text" ><code >Text</code ></a > </li> <li> <a href="/en-US/docs/Web/API/TextDecoder" ><code >TextDecoder</code ></a > </li> <li> <a href="/en-US/docs/Web/API/TextEncoder" ><code >TextEncoder</code ></a > </li> <li> <a href="/en-US/docs/Web/API/TimeRanges" ><code >TimeRanges</code ></a > </li> <li> <a href="/en-US/docs/Web/API/TreeWalker" ><code >TreeWalker</code ></a > </li> <li> <a href="/en-US/docs/Web/API/TypeInfo" ><code >TypeInfo</code ></a > </li> <li> <a href="/en-US/docs/Web/API/USVString" ><code >USVString</code ></a > </li> <li> <a href="/en-US/docs/Web/API/UserDataHandler" ><code >UserDataHandler</code ></a > </li> <li> <a href="/en-US/docs/Web/API/XMLDocument" ><code >XMLDocument</code ></a > </li> </ol></details > </li> </ol> </div> <!-- approvals --> </div> </div> </div> </div> </div> <div id="find-me" class="find-me">Find me!</div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
querySelector(tag.class)
var found = document.querySelector("div.find-me");
pending…
querySelector(id)
var found = document.querySelector("#find-me");
pending…
querySelector(tag#id)
var found = document.querySelector("div#find-me");
pending…
getElementsByClassName
var found = document.getElementsByClassName(".find-me")[0];
pending…
querySelector(class)
var found = document.querySelector(".find-me");
pending…
getElementById
var found = document.getElementById("find-me");
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments

The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

Syntax

element = baseElement.querySelector(selectors);
  

Parameters

selectors
A group of selectors to match the descendant elements of the Element baseElement against; this must be valid CSS syntax, or a SyntaxError exception will occur. The first element found which matches this group of selectors is returned.

Return value

The first descendant element of baseElement which matches the specified group of selectors. The entire hierarchy of elements is considered when matching, including those outside the set of elements including baseElement and its descendants; in other words, selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement. The first match of those remaining elements is returned by the querySelector() method.

If no matches are found, the returned value is null.

Exceptions

SyntaxError
The specified selectors are invalid.

Examples

Let's consider a few examples.

Find a specific element with specific values of an attribute

In this first example, the first <style> element which either has no type or has type "text/css" in the HTML document body is returned:

  var el = document.body.querySelector("style[type='text/css'], style:not([type])");
  

The entire hierarchy counts

This example demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels outside the specified baseElement are still considered when locating matches.

HTML

  <div>
    <h5>Original content</h5>
    <p>
      inside paragraph
      <span>inside span</span>
      inside paragraph
    </p>
  </div>
  <div>
    <h5>Output</h5>
    <div id="output"></div>
  </div>

JavaScript

  var baseElement = document.querySelector("p");
  document.getElementById("output").innerHTML =
    (baseElement.querySelector("div span").innerHTML);

Result

The result looks like this:

Notice how the "div span" selector still successfully matches the <span> element, even though the baseElement's child nodes do not include the div element (it is still part of the specified selector).

More examples

See Document.querySelector() for additional examples of the proper format for the selectors.

Specifications

Specification Status Comment
DOM
The definition of 'querySelector()' in that specification.
Living Standard
Selectors API Level 2
The definition of 'querySelectorAll()' in that specification.
Obsolete
Selectors API Level 1
The definition of 'querySelectorAll()' in that specification.
Obsolete

Browser compatibility

Update compatibility data on GitHub
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android Safari on iOS Samsung Internet
querySelector Chrome Full support 1 Edge Full support 12 Firefox Full support 3.5 IE Full support 9
Full support 9
Partial support 8
Notes
Notes querySelector() is supported, but only for CSS 2.1 selectors.
Opera Full support Yes Safari Full support 6 WebView Android Full support Yes Chrome Android Full support Yes Edge Mobile Full support Yes Firefox Android Full support Yes Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

Legend

Full support
Full support
See implementation notes.
See implementation notes.

See also

Find me!