Javascript queryselector by class

JavaScript querySelector

Summary: in this tutorial, you will learn how to use the JavaScript querySelector() and querySelectorAll() to find elements based on CSS selectors.

Introduction to JavaScript querySelector() and querySelectorAll() methods

The querySelector() is a method of the Element interface. The querySelector() method allows you to select the first element that matches one or more CSS selectors.

The following illustrates the syntax of the querySelector() method:

let element = parentNode.querySelector(selector);Code language: JavaScript (javascript)

In this syntax, the selector is a CSS selector or a group of CSS selectors to match the descendant elements of the parentNode .

If the selector is not valid CSS syntax, the method will raise a SyntaxError exception.

If no element matches the CSS selectors, the querySelector() returns null .

The querySelector() method is available on the document object or any Element object.

Besides the querySelector() , you can use the querySelectorAll() method to select all elements that match a CSS selector or a group of CSS selectors:

let elementList = parentNode.querySelectorAll(selector);Code language: JavaScript (javascript)

The querySelectorAll() method returns a static NodeList of elements that match the CSS selector. If no element matches, it returns an empty NodeList .

Note that the NodeList is an array-like object, not an array object. However, in modern web browsers, you can use the forEach() method or the for. of loop.

To convert the NodeList to an array, you use the Array.from() method like this:

let nodeList = document.querySelectorAll(selector); let elements = Array.from(nodeList);Code language: JavaScript (javascript)

Basic selectors

Suppose that you have the following HTML document:

html> html lang="en"> head> title>querySelector() Demo title> head> body> header> div id="logo"> img src="img/logo.jpg" alt="Logo" id="logo"> div> nav class="primary-nav"> ul> li class="menu-item current">a href="#home">Home a> li> li class="menu-item">a href="#services">Services a> li> li class="menu-item">a href="#about">About a> li> li class="menu-item">a href="#contact">Contact a> li> ul> nav> header> main> h1>Welcome to the JS Dev Agency h1> div class="container"> section class="section-a"> h2>UI/UX h2> p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat, atque accusamus voluptas laudantium facilis iure adipisci ab veritatis eos neque culpa id nostrum tempora tempore minima. Adipisci, obcaecati repellat. p> button>Read More button> section> section class="section-b"> h2>PWA Development h2> p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni fugiat similique illo nobis quibusdam commodi aspernatur, tempora doloribus quod, consectetur deserunt, facilis natus optio. Iure provident labore nihil in earum. p> button>Read More button> section> section class="section-c"> h2>Mobile App Dev h2> p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi eos culpa laudantium consequatur ea! Quibusdam, iure obcaecati. Adipisci deserunt, alias repellat eligendi odit labore! Fugit iste sit laborum debitis eos? p> button>Read More button> section> div> main> script src="js/main.js"> script> body> html>Code language: HTML, XML (xml)

1) Universal selector

The universal selector is denoted by * that matches all elements of any type:

The following example uses the querySelector() selects the first element in the document:

let element = document.querySelector('*');Code language: JavaScript (javascript)

And this select all elements in the document:

let elements = document.querySelectorAll('*');Code language: JavaScript (javascript)

2) Type selector

To select elements by node name, you use the type selector e.g., a selects all elements:

The following example finds the first h1 element in the document:

let firstHeading = document.querySelector('h1');Code language: JavaScript (javascript)

And the following example finds all h2 elements:

let heading2 = document.querySelectorAll('h2');Code language: JavaScript (javascript)

3) Class selector

To find the element with a given CSS class, you use the class selector syntax:

.classNameCode language: CSS (css)

The following example finds the first element with the menu-item class:

let note = document.querySelector('.menu-item');Code language: JavaScript (javascript)

And the following example finds all elements with the menu class:

let notes = document.querySelectorAll('.menu-item');Code language: JavaScript (javascript)

4) ID Selector

To select an element based on the value of its id, you use the id selector syntax:

The following example finds the first element with the id #logo :

let logo = document.querySelector('#logo');Code language: JavaScript (javascript)

Since the id should be unique in the document, the querySelectorAll() is not relevant.

5) Attribute selector

To select all elements that have a given attribute, you use one of the following attribute selector syntaxes:

[attribute] [attribute=value] [attribute~=value] [attribute|=value] [attribute^=value] [attribute$=value] [attribute*$*=value] Code language: JSON / JSON with Comments (json)

The following example finds the first element with the attribute [autoplay] with any value:

let autoplay = document.querySelector('[autoplay]');Code language: JavaScript (javascript)

And the following example finds all elements that have [autoplay] attribute with any value:

let autoplays = document.querySelectorAll('[autoplay]');Code language: JavaScript (javascript)

Grouping selectors

To group multiple selectors, you use the following syntax:

The selector list will match any element with one of the selectors in the group.

The following example finds all and

elements:

let elements = document.querySelectorAll('div, p');Code language: JavaScript (javascript)

Combinators

1) descendant combinator

To find descendants of a node, you use the space ( ) descendant combinator syntax:

For example p a will match all elements inside the p element:

let links = document.querySelector('p a');Code language: JavaScript (javascript)

2) Child combinator

The > child combinator finds all elements that are direct children of the first element:

let listItems = document.querySelectorAll('ul > li');Code language: JavaScript (javascript)

element with the class nav :

let listItems = document.querySelectorAll('ul.nav > li');Code language: JavaScript (javascript)

3) General sibling combinator

The ~ combinator selects siblings that share the same parent:

let links = document.querySelectorAll('p ~ a');Code language: JavaScript (javascript)

4) Adjacent sibling combinator

The + adjacent sibling combinator selects adjacent siblings:

For example, h1 + a matches all elements that directly follow an h1 :

let links = document.querySelectorAll('h1 + a');Code language: JavaScript (javascript)

let links = document.querySelector('h1 + a'); Code language: JavaScript (javascript)

Pseudo

1) Pseudo-classes

The : pseudo matches elements based on their states:

element:stateCode language: CSS (css)

let listItem = document.querySelectorAll('li:nth-child(2)');Code language: JavaScript (javascript)

2) Pseudo-elements

The :: represent entities that are not included in the document.

For example, p::first-line matches the first line of all p elements:

let links = document.querySelector('p::first-line'); Code language: JavaScript (javascript)

Summary

• The querySelector() finds the first element that matches a CSS selector or a group of CSS selectors.
• The querySelectorAll() finds all elements that match a CSS selector or a group of CSS selectors.
• A CSS selector defines elements to which a CSS rule applies.

Источник

Document: querySelector() method

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.

Note: The matching is done using depth-first pre-order traversal of the document’s nodes starting with the first element in the document’s markup and iterating through sequential nodes by order of the number of child nodes.

Syntax

Parameters

A string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn’t, a SyntaxError exception is thrown. See Locating DOM elements using selectors for more about selectors and how to manage them.

Note: Characters that are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, be especially careful when writing string literals using these characters. See Escaping special characters for more information.

Return value

An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.

Exceptions

Thrown if the syntax of the specified selectors is invalid.

Usage notes

If the specified selector matches an ID that is incorrectly used more than once in the document, the first element with that ID is returned.

CSS pseudo-elements will never return any elements, as specified in the Selectors API.

Escaping special characters

To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash (» \ «). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector() ):

div id="foo\bar">div> div id="foo:bar">div> script> console.log("#foo\bar"); // "#fooar" (\b is the backspace control character) document.querySelector("#foo\bar"); // Does not match anything console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // Match the first div document.querySelector("#foo:bar"); // Does not match anything document.querySelector("#foo\\:bar"); // Match the second div script> 

Examples

Finding the first element matching a class

In this example, the first element in the document with the class » myclass » is returned:

const el = document.querySelector(".myclass"); 

Complex selectors

const el = document.querySelector("div.user-panel.main input[name='login']"); 

Negation

As all CSS selector strings are valid, you can also negate selectors:

const el = document.querySelector( "div.user-panel:not(.main) input[name='login']", ); 

This will select an input with a parent div with the user-panel class but not the main class.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник