Memakai Selectors API Di JavaScript


Salah satu library yang mempopulerkan CSS selector adalah jQuery. Dengan CSS selector seperti ".selected" atau "#buttonSimpan", developer dapat melakukan navigasi DOM dengan mudah. Tapi tidak selamanya butuh library tambahan untuk melakukan hal tersebut. Misalnya, saya bisa memakai Selectors API secara langsung dari JavaScript. Selectors API (http://www.w3.org/TR/selectors-api/) adalah spesifikasi yang memiliki tujuan untuk menciptakan dukungan CSS selector secara native (terintegrasi dalam browser). Karena tidak dibutuhkan library eksternal, maka kinerjanya akan lebih baik.

Hampir semua browser modern sudah memiliki fasilitas ini melalui method querySelector() dan querySelectorAll(). Perbedaan antara kedua method tersebut adalah method querySelector() hanya akan mengembalikan sebuah node sementara itu method querySelectorAll() akan mengembalikan seluruh node yang dicari dalam bentuk NodeList.

Sebagai latihan, anggap saja saya memiliki HTML dengan isi seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Latihan</title>
</head>
<body>
    <h1>Latihan</h1>    
    <form id='frmUtama'>
        <div class='baris'>
            <label>Nama:</label>
            <input id='txtNama' type='text' class='komponen'/>          
        </div>
        <div class='baris'>
            <label>Jenis:</label>
            <input id='jenisManusia' type='radio' name='jenis' value='manusia' class='komponen'/>Manusia
            <input id='jenisMutant' type='radio' name='jenis' value='mutant' class='komponen'/>Mutant
        </div>
        <div class='baris'>
            <label>Kemampuan:</label>
            <select id='kemampuan' multiple=true size='3' class='komponen'>
                <option value='telepati'>Telepati</option>
                <option value='magnetisme'>Magnetisme</option>
                <option value='penyembuhan'>Penyembuhan</option>
                <option value='machinary'>Machinary</option>
            </select>
        </div>
    </form>
</body>
</html>

Untuk mendapatkan masing-masing komponen yang ada melalui id, saya dapat menggunakan JavaScript yang memakai CSS selector seperti pada gambar berikut ini:

Contoh penggunaan CSS selector

Contoh penggunaan CSS selector

Selain itu, saya juga bisa mencari setiap komponen tersebut berdasarkan CSS class (pada HTML5, ini setara document.getElementsByClassName()) seperti yang terlihat pada gambar berikut ini:

Contoh penggunaan CSS selector

Contoh penggunaan CSS selector

Terlihat bahwa bila menggunakan querySelector(), yang dikembalikan hanya sebuah Element saja. Sementara itu, querySelectorAll() akan mengembalikan sebuah NodeList yang berisi seluruh Element yang memiliki CSS class .komponen. Perhatikan bahwa NodeList bukan sebuah array sehingga ia tidak memiliki method seperti forEach() atau map(). Tapi saya dapat melakukan looping untuk seluruh elemen yang ada dengan menggunakan for...of seperti pada contoh berikut ini:

for (var item of document.querySelectorAll('.komponen')) {
    console.log(item.id);
}

// Output:
// "txtNama"
// "jenisManusia"
// "jenisMutant"
// "kemampuan"

Karena NodeList adalah sebuah object, maka saya tidak dapat memakai for...in yang akan melakukan enumerasi untuk seluruh property milik object. Hasil yang saya peroleh akan berbeda, seperti yang terlihat pada contoh berikut ini:

for (var item in document.querySelectorAll('.komponen')) {    
    console.log(item);
}

// Output:
// "0"
// "1"
// "2"
// "3"
// "item"
// "@@iterator"
// "length"

Saya dapat mencari Element berdasarkan atributnya, misalnya untuk mencari <input> yang memiliki atribut type='radio', saya dapat menggunakan JavaScript seperti berikut ini:

document.querySelectorAll("input[type='radio']");

Untuk mencari berbedasarkan beberapa atribut yang berbeda, saya dapat menggunakan CSS selector seperti berikut ini:

document.querySelectorAll("input[type='radio'][value='manusia']");

Untuk mendapatkan radio button yang sedang dipilih, saya dapat menggunakan CSS selector seperti berikut ini:

document.querySelector("input[name='jenis']:checked");

Untuk mendapatkan nilai yang dipilih dari <select>, saya dapat menggunakan CSS selector seperti:

document.querySelectorAll("#kemampuan > option:checked");
// Output: NodeList [<option>, <option>]

Bila ingin mengolah NodeList yang dihasilkan menjadi dalam bentuk string, saya dapat membuat JavaScript seperti berikut ini:

Array.prototype.slice.call(document.querySelectorAll("#kemampuan > option:checked"))
    .map(function(i) { return i.label; })
    .join(', ');

Satu hal yang menarik adalah bila saya mencoba seluruh kode program di atas pada Firefox Web Console, maka saya sebenarnya dapat menggunakan $() sebagai sinonim dari document.querySelector() dan $$() sebagai sinonim dari document.querySelectorAll(), seperti yang terlihat pada gambar berikut ini:

$ dan $$ di Firefox Web Console

$ dan $$ di Firefox Web Console

Selain Selector API Level 1, juga ada Selector API Level 2 (http://www.w3.org/TR/selectors-api2) yang menambahkan find() dan findAll() pada Element dan NodeList, serta matches() pada Element. Method find() dan findAll() akan mencari berdasarkan relative selector. Sayangnya, spesifikasi tersebut belum stabil dan belum di-implementasi-kan pada browser modern.

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: