QuerySelector Examples

query selector specs

https://www.w3.org/TR/selectors-4/#attribute-selectors

get child

let listItems = document.querySelectorAll('ul.nav > li');

siblings example all that follow p immediatly or not

let links = document.querySelectorAll('p ~ a');

immediate siblings

let links = document.querySelectorAll('h1 + a');

sudo elements

// second li element in list
let listItem = document.querySelectorAll('li:nth-child(2)');

//first line of all divs
let links = document.querySelector('p::first-line');    

multiple items

document.querySelectorAll('div, span')

html attribute

document.querySelectorAll('[data-example="test"]')

css pseudo class

document.querySelectorAll(':nth-child(4n)')

descendants

document.querySelectorAll('#test li')

all table cells not right align

document.querySelectorAll(‘tbody
td:not(.MuiTableCell - alignRight
)’)

every other tr starting with first

querySelectorAll(‘tr:nth - of - type(2n + 1)’)

multi select

querySelectorAll(`tbody td:nth-child(1), tfoot  tr:first-child > td`)

input

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>
//Replace $$ with document.querySelectorAll in the examples:

$$('input') //Every input
$$('[id]') //Every element with id
$$('[id="c2"]') //Every element with id="c2"
$$('input,[id]') //Every input + every element with id
$$('input[id]') //Every input including id
$$('input[id="c2"]') //Every input including id="c2"
$$('input#c2') //Every input including id="c2" (same as above)
$$('input#c2[value="DE039230952"]') //Every input including id="c2" and value="DE039230952"
$$('input#c2[value^="DE039"]') //Every input including id="c2" and value has content starting with DE039
$$('input#c2[value$="0952"]') //Every input including id="c2" and value has content ending with 0952
$$('input#c2[value*="39230"]') //Every input including id="c2" and value has conten

//Use the examples above directly, without the need for additional library, just by adding:

const $$ = document.querySelectorAll.bind(document);
//Some additions:

$$(.
) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()