Seletor de consulta JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial você aprenderá como usar JavaScript querySelector()e querySelectorAll()encontrar elementos baseados em seletores CSS.

Introdução aos métodos JavaScript querySelector() e querySelectorAll()

O querySelector()é um método da Elementinterface. O querySelector()método permite selecionar o primeiro elemento que corresponde a um ou mais seletores CSS.

O seguinte ilustra a sintaxe do querySelector()método:

let element = parentNode.querySelector(selector);Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe, selectoré um seletor CSS ou um grupo de seletores CSS para corresponder aos elementos descendentes do parentNode.

Se a selectorsintaxe CSS não for válida, o método gerará uma SyntaxErrorexceção.

Se nenhum elemento corresponder aos seletores CSS, o querySelector()retorno será null.

O querySelector()método está disponível no documentobjeto ou em qualquer Elementobjeto.

Além de querySelector(), você pode usar o querySelectorAll()método para selecionar todos os elementos que correspondem a um seletor CSS ou a um grupo de seletores CSS:

let elementList = parentNode.querySelectorAll(selector);Linguagem de código:  JavaScript  ( javascript )

O querySelectorAll()método retorna uma estática NodeListde elementos que correspondem ao seletor CSS. Se nenhum elemento corresponder, ele retornará um arquivo vazio NodeList.

Observe que NodeListé um objeto semelhante a um array, não um objeto array. No entanto, em navegadores modernos, você pode usar o forEach()método ou o for...ofloop.

Para converter o NodeListem um array, você usa o Array.from()método como este:

let nodeList = document.querySelectorAll(selector);
let elements = Array.from(nodeList);Linguagem de código:  JavaScript  ( javascript )

Seletores básicos

Suponha que você tenha o seguinte documento HTML:

<!DOCTYPE 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>Linguagem de código:  HTML, XML  ( xml )

1) Seletor universal

O seletor universal é indicado por *que corresponde a todos os elementos de qualquer tipo:

O exemplo a seguir usa a querySelector()seleção do primeiro elemento no documento:

let element = document.querySelector('*');Linguagem de código:  JavaScript  ( javascript )

E isso seleciona todos os elementos do documento:

let elements = document.querySelectorAll('*');Linguagem de código:  JavaScript  ( javascript )

2) Seletor de tipo

Para selecionar elementos pelo nome do nó, você usa o seletor de tipo, por exemplo, aseleciona todos os <a>elementos:

elementName

O exemplo a seguir localiza o primeiro h1elemento no documento:

let firstHeading = document.querySelector('h1');Linguagem de código:  JavaScript  ( javascript )

E o exemplo a seguir encontra todos h2os elementos:

let heading2 = document.querySelectorAll('h2');Linguagem de código:  JavaScript  ( javascript )

3) Seletor de classe

Para encontrar o elemento com uma determinada classe CSS, você usa a sintaxe do seletor de classe:

.classNameLinguagem de código:  CSS  ( css )

O exemplo a seguir encontra o primeiro elemento com a menu-itemclasse:

let note = document.querySelector('.menu-item');Linguagem de código:  JavaScript  ( javascript )

E o exemplo a seguir encontra todos os elementos da menuclasse:

let notes = document.querySelectorAll('.menu-item');Linguagem de código:  JavaScript  ( javascript )

4) Seletor de ID

Para selecionar um elemento com base no valor de seu id, você usa a sintaxe do seletor de id:

#idLinguagem de código:  CSS  ( css )

O exemplo a seguir encontra o primeiro elemento com o id #logo:

let logo = document.querySelector('#logo');Linguagem de código:  JavaScript  ( javascript )

Como o iddeve ser único no documento, o querySelectorAll()não é relevante.

5) Seletor de atributos

Para selecionar todos os elementos que possuem um determinado atributo, você usa uma das seguintes sintaxes de seletor de atributos:

[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*$*=value]
Linguagem de código:  JSON/JSON com comentários  ( json )

O exemplo a seguir encontra o primeiro elemento com o atributo [autoplay]com qualquer valor:

let autoplay = document.querySelector('[autoplay]');Linguagem de código:  JavaScript  ( javascript )

E o exemplo a seguir encontra todos os elementos que possuem [autoplay]atributo com qualquer valor:

let autoplays = document.querySelectorAll('[autoplay]');Linguagem de código:  JavaScript  ( javascript )

Seletores de agrupamento

Para agrupar vários seletores, use a seguinte sintaxe:

selector, selector, ...

A lista de seletores corresponderá a qualquer elemento com um dos seletores do grupo.

O exemplo a seguir encontra todos os elementos <div>e <p>:

let elements = document.querySelectorAll('div, p');Linguagem de código:  JavaScript  ( javascript )

Combinadores

1) combinador descendente

Para encontrar descendentes de um nó, você usa a sintaxe do combinador descendente de espaço ( ):

selector selector

Por exemplo p a, irá corresponder a todos <a>os elementos dentro do pelemento:

let links = document.querySelector('p a');Linguagem de código:  JavaScript  ( javascript )

2) Combinador infantil

O >combinador filho encontra todos os elementos que são filhos diretos do primeiro elemento:

selector > selector

O exemplo a seguir encontra todos lios elementos que estão diretamente dentro de um <ul>elemento:

let listItems = document.querySelectorAll('ul > li');Linguagem de código:  JavaScript  ( javascript )

Para selecionar todos lios elementos que estão diretamente dentro de um <ul>elemento com a classe nav:

let listItems = document.querySelectorAll('ul.nav > li');Linguagem de código:  JavaScript  ( javascript )

3) Combinador geral de irmãos

O ~combinador seleciona irmãos que compartilham o mesmo pai:

selector ~ selector

Por exemplo, p ~ airá corresponder a todos <a>os elementos que seguem o pelemento, imediatamente ou não:

let links = document.querySelectorAll('p ~ a');Linguagem de código:  JavaScript  ( javascript )

4) Combinador de irmãos adjacentes

O +combinador de irmãos adjacentes seleciona irmãos adjacentes:

selector + selector

Por exemplo, h1 + acorresponde a todos os elementos que seguem diretamente um h1:

let links = document.querySelectorAll('h1 + a');Linguagem de código:  JavaScript  ( javascript )

E selecione o primeiro <a>que segue diretamente a h1:

let links = document.querySelector('h1 + a');
Linguagem de código:  JavaScript  ( javascript )

Pseudo

1) Pseudo-classes

O :pseudo combina elementos com base em seus estados:

element:stateLinguagem de código:  CSS  ( css )

Por exemplo, li:nth-child(2)seleciona o segundo <li>elemento em uma lista:

let listItem = document.querySelectorAll('li:nth-child(2)');Linguagem de código:  JavaScript  ( javascript )

2) Pseudoelementos

Representam ::entidades que não estão incluídas no documento.

Por exemplo, p::first-linecorresponde à primeira linha de todos os pelementos:

let links = document.querySelector('p::first-line');    Linguagem de código:  JavaScript  ( javascript )

Resumo

Encontra querySelector()o primeiro elemento que corresponde a um seletor CSS ou a um grupo de seletores CSS.
Encontra querySelectorAll()todos os elementos que correspondem a um seletor CSS ou a um grupo de seletores CSS.
Um seletor CSS define elementos aos quais uma regra CSS se aplica.

JavaScript getElementsByClassName

JavaScript Obtenha o elemento pai parentNode