DOM SELECTORS

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 <a> elements:

elementName

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:

.className
Code 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:

#id
Code language: CSS (css)

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:

selector, selector, ...

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

The following example finds all <div> and <p> 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:

selector selector

For example p a will match all <a> 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:

selector > selector

The following example finds all li elements that are directly inside a <ul> element:

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

To select all li elements that are directly inside a <ul> 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:

selector ~ selector

For example, p ~ a will match all <a> elements that follow the p element, immediately or not:

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

4) Adjacent sibling combinator

The + adjacent sibling combinator selects adjacent siblings:

selector + selector

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

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

And select the first <a> that directly follows an h1:

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

Pseudo

1) Pseudo-classes

The : pseudo matches elements based on their states:

element:state
Code language: CSS (css)

For example, the li:nth-child(2) selects the second <li> element in a list:

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.