Selector adalah perintah yang digunakan untuk menghubungkan baris program HTML dengan Javascript. Selector digunakan untuk memilih elemen yang mana yang akan diatur atau dikendalikan oleh program pada Javascript.

getElementById()

getElementById() adalah selector yang digunakan untuk memilih sebuah elemen untuk diatur/dikendalikan berdasarkan pada "id".

Selector ini hanya memilih sebuah elemen dengan "id" tertentu. Jika terdapat banyak elemen dengan "id" tersebut, maka yang dipilih hanya satu yaitu yang pertama.

var id_a = document.getElementById("a"); id_a.style.color = "blue";

Dari program diatas, dicari sebuah elemen dengan "id" a pada keseluruhan document, kemudian ditempatkan pada variabel id_a. Tulisan pada elemen yang dipilih kemudian diubah menjadi berwarna biru.

getElementsByClassName()

Selain selector untuk memilih elemen berdasarkan "id", terdapat juga selector untuk memilih elemen berdasarkan "class".

getElementsByClassName() adalah selector yang digunakan untuk memilih beberapa elemen untuk diatur/dikendalikan berdasarkan pada "class".

var class_a = document.getElementsByClassName("a"); class_a[0].style.color = "blue";

Dari program diatas, dicari sejumlah elemen dengan "class" a pada keseluruhan document, kemudian ditempatkan pada variabel class_a.

Variabel class_a otomatis menjadi sebuah variabel Array. Variabel array memungkinkan untuk menampung beberapa elemen. Jika pada document ternyata hanya ada satu buah elemen dengan class a, maka variabel class_a tetap menjadi variabel array.

Untuk itu, untuk mengaksesnya digunakan cara sebagaimana cara yang digunakan untuk mengakses sebuah Array seperti pada contoh diatas.

getElementsByTagName()

getElementsByTagName() adalah selector yang digunakan untuk memilih beberapa elemen berdasarkan tagName.

var tag_p = document.getElementsByTagName("p"); tag_p[0].style.color = "blue";

Dari program diatas, dicari sejumlah elemen dengan "tagname" p atau

paragraf

pada keseluruhan document, kemudian ditempatkan pada variabel tag_p.

Selector ini memilih beberapa elemen dimana sama halnya dengan selector class. Semua elemen tersebut disimpan pada sebuah array dan diakses sebagaimana cara mengakses sebuah array.

getElementsByName()

getElementsByName() adalah selector yang digunakan untuk memilih beberapa elemen berdasarkan name.

Misalnya anda menggunakan selector name pada HTML anda maka anda bisa menuliskan program berikut untuk mengaksesnya.

var name_a = document.getElementsByName("a"); name_a[0].style.color = "blue";

Dari program diatas, dicari sejumlah elemen dengan "name" a pada keseluruhan document, kemudian ditempatkan pada variabel name_a.

Selector ini memilih beberapa elemen dimana sama halnya dengan selector class dan tagname. Semua elemen tersebut disimpan pada sebuah array dan diakses sebagaimana cara mengakses sebuah array.

querySelector()

querySelector() adalah selector yang digunakan untuk memilih sebuah elemen. Pemilihan elemen bisa berdasarkan id, class, name, atau property lainnya.

Berikut adalah contoh baris program untuk memilih elemen berdasarkan nama tag

var tag_p = document.querySelector("p");

Berikut adalah contoh baris program untuk memilih elemen berdasarkan id

var id_a = document.querySelector("#a");

Berikut adalah contoh baris program untuk memilih elemen berdasarkan class

var class_a = document.querySelector(".a");

Berikut adalah contoh baris program untuk memilih elemen berdasarkan properti nameclass

var name_a = document.querySelector("[name='a']");

Berikut adalah contoh baris program untuk memilih elemen berdasarkan properti onclick

var onclick_contoh = document.querySelector("[onclick='contoh()']");

Selector ini hanya memilih sebuah elemen yaitu elemen pertama. Berikut adalah contoh cara mengakses elemen dari selector ini.

tag_a.style.color = "blue";

querySelectorAll()

querySelectorAll() adalah selector yang digunakan untuk memilih beberapa elemen. Pemilihan elemen bisa berdasarkan id, class, name, atau property lainnya.

Berbeda dengan querySelector(), selector ini dapat digunakan memilih beberapa elemen dan ditempat pada sebuah Array. Sehingga, cara mengaksesnya sama dengan cara mengakses Array.

Berikut adalah contoh penggunaannya.

var a = document.querySelectorAll("p"); a[0].style.color = "blue";

Lihat juga dan .

Sekian, Semoga bermanfaat