JavaScript DOM Bagian 6 : Cara Menggunakan querySelector di JavaScript

Pada tutorial sebelumnya, kita sudah mempelajari tentang JavaScript DOM Bagian 5 : Cara Menggunakan getElementsByClassName di JavaScript.

Dalam tutorial ini, kita akan mempelajari cara menggunakan JavaScript querySelector() dan querySelectorAll() untuk menemukan elemen berdasarkan CSS selector.

Pengantar metode JavaScript querySelector() dan querySelectorAll()

querySelector() adalah metode antarmuka Elemen. Metode querySelector() memungkinkan Anda memilih elemen pertama yang cocok dengan satu atau beberapa CSS selector.

Berikut ini mengilustrasikan sintaks dari metode querySelector() :

let element = parentNode.querySelector(selector);

Dalam sintaks ini, selector adalah CSS selector atau sekelompok CSS selector untuk mencocokkan elemen turunan dari parentNode.

Jika selector sintaks CSS tidak valid, metode ini akan memunculkan pengecualian SyntaxError.

Jika tidak ada elemen yang cocok dengan CSS selector, querySelector() mengembalikan nilai null.

Metode querySelector() tersedia di objek dokumen atau objek Elemen apa pun.

Selain querySelector() , Anda bisa menggunakan metode querySelectorAll() untuk memilih semua elemen yang cocok dengan CSS selector atau sekelompok CSS selector:

let elementList = parentNode.querySelectorAll(selector);

Metode querySelectorAll() mengembalikan elemen NodeList statis yang cocok dengan CSS selector. Jika tidak ada elemen yang cocok, ia mengembalikan NodeList kosong.

Perhatikan bahwa NodeList adalah objek seperti array, bukan objek array. Namun, di browser web modern, Anda dapat menggunakan metode forEach() atau for…of loop.

Untuk mengonversi NodeList menjadi array, Anda menggunakan metode Array.from() seperti ini:

let nodeList = document.querySelectorAll(selector);

let elements = Array.from(nodeList);

Basic Selector

Misalkan Anda memiliki dokumen HTML seperti berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Demo querySelector() </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">Layanan</a></li>
                <li class="menu-item"><a href="#about">Tentang</a></li>
                <li class="menu-item"><a href="#contact">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Selamat Datang di Agensi JS Dev</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>Baca selebihnya</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>Baca selebihnya</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>Baca selebihnya</button>
            </section>
        </div>
    </main>
    <script src="js/main.js"></script>
</body>
</html>

1. Universal Selector

Selector universal dilambangkan dengan * yang cocok dengan semua elemen dari jenis apa pun:

Contoh berikut menggunakan querySelector() memilih elemen pertama dalam dokumen:

let element = document.querySelector('*');

Dan tag ini memiliki arti, pilih semua elemen dalam dokumen :

let elements = document.querySelectorAll('*');

2. Type Selector

Untuk memilih elemen berdasarkan node name, Anda menggunakan type selector misalnya, a untuk memilih semua elemen <a>:

elementName

Contoh berikut menemukan elemen h1 pertama dalam dokumen:

let firstHeading = document.querySelector('h1');

Dan contoh berikut menemukan semua elemen h2:

let heading2 = document.querySelectorAll('h2');

3. Class Selector

Untuk menemukan elemen dengan class CSS tertentu, Anda menggunakan sintaks class selector :

.className

Contoh berikut menemukan elemen pertama dengan class menu-item:

let note = document.querySelector('.menu-item');

Dan contoh berikut menemukan semua elemen untuk class menu-item:

let note = document.querySelectorAll('.menu-item');

4. id Selector

Untuk memilih elemen berdasarkan nilai id-nya, Anda bisa menggunakan sintaks ID selector :

#id

Contoh berikut menemukan elemen pertama dengan id #logo:

let logo = document.querySelector('#logo');

Karena id bersifat unik dan tidak boleh sama dengan id yang lain, querySelectorAll() tidak bisa digunakan.

5. Attribute Selector

Untuk memilih semua elemen yang memiliki atribut tertentu, Anda menggunakan salah satu sintaks attribute selector berikut:

[atribut]

[atribut=nilai]

[atribut~=nilai]

[atribut|=nilai]

[atribut^=nilai]

[atribut$=nilai]

[atribut*$*=nilai]

Contoh berikut menemukan elemen pertama dengan atribut [autoplay] dengan nilai apa pun:

let autoplay = document.querySelector('[autoplay]');

Dan contoh berikut menemukan semua elemen yang memiliki atribut [autoplay] dengan nilai berapa pun:

let autoplay = document.querySelectorAll('[autoplay]');

Group Selector

Untuk mengelompokkan beberapa selector, Anda menggunakan sintaks berikut:

selector, selector, …

Daftar selector akan mencocokkan elemen apa pun dengan salah satu selector dalam grup.

Contoh berikut bertujuan untuk menemukan semua elemen <div> dan <p>:

let elements = document.querySelectorAll('div, p');

Combinator

Descendant Combinator

Untuk menemukan turunan dari sebuah node, Anda menggunakan sintaks kombinator keturunan spasi ( ):

selector selector

Misalnya p a akan cocok dengan semua elemen <a> di dalam elemen p:

let links = document.querySelector('p a');

Child Combinator

Cominator > child menemukan semua elemen yang merupakan anak langsung dari elemen pertama:

selector > selector

Contoh berikut menemukan semua elemen li yang berada langsung di dalam elemen <ul>:

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

Untuk memilih semua elemen li yang berada langsung di dalam elemen <ul> dengan class nav:

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

General Sibling Combinator

Combinator ~ berfungsi untuk memilih saudara kandung yang berbagi induk yang sama:

selector ~ selector

Misalnya, p ~ a akan cocok dengan semua elemen <a> yang mengikuti elemen p, secara langsung atau tidak:

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

Adjacent Sibling Combintor

Combinator + saudara kandung yang berdekatan memilih saudara kandung yang berdekatan:

selector + selector

Misalnya, h1 + a cocok dengan semua elemen yang langsung mengikuti h1:

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

Dan pilih <a> pertama yang langsung mengikuti h1:

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

Pseudo

Pseudo Classes

Elemen : pseudo match berdasarkan statusnya:

element: state

Misalnya, li:nth-child(2) memilih elemen <li> kedua dalam daftar:

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

Element Classes

Kode :: mewakili entitas yang tidak termasuk dalam dokumen.

Misalnya, p::first-line cocok dengan baris pertama dari semua elemen p:

let links = document.querySelector('p::first-line');

Kesimpulan

querySelector() menemukan elemen pertama yang cocok dengan CSS selector atau sekelompok CSS selector.
querySelectorAll() menemukan semua elemen yang cocok dengan CSS selector atau sekelompok CSS selector.
CSS selector menentukan elemen yang menerapkan aturan CSS.