Cara Memilih Element (selector) HTML Pada JavaScript

Cara Memilih Element (selector) HTML Pada JavaScript

Memilih element (selector) HTML pada JavaScript intinya seperti selector pada CSS yaitu bisa menggunakan nama class, nama ID, atau tag HTML. Namun untuk penulisan kodenya sangat berbeda dengan selector pada CSS. Pada JavaScript untuk memilih element HTML memerlukan tulisan (kode) yang cukup panjang. Namun lama kelamaan kamu akan terbiasa menulis kode selector tersebut.

Tujuan dari memilih element HTML ini biasanya untuk mengubah atau menambahkan sesuatu pada element yang dipilih. Misalnya merubah nilai value tertentu, menambah atribut tertentu, hingga menambahkan tag HTML lainnya. Untuk memilih element HTML pada JavaScript caranya sebagai berikut.

Memilih Element Menggunakan Nama ID

Untuk memilih element HTML dengan JavaScript menggunakan ID, caranya dengan menggunakan perintah sebagai berikut :

Silakan perhatikan tulisan perintah kode tersebut secara teliti. Huruf besar kecil sangat berpengaruh, jadi harus ditulis sama persis seperti itu. Sebagai pengingat setiap awal penulisan diawali dengan huruf kecil, dan kata berikutnya yang masih dalam satu kalimat tidak ditulis dengan spasi tapi menggunakan huruf besar setiap awal kata. Kemudian tulisan “NamaID” diganti dengan id pada tag HTML yang akan dipilih. Berikut adalah penerapan dari contoh kode diatas :

Pada contoh kode diatas terdapat sebuah tag h1 yang memiliki ID dengan nama “isi”. Kemudian pada baris nomor 11 terdapat kode document.getElementById(“isi”), kode ini memilih id dengan nama id “isi”. Kemudian setelahnya ada kode lagi .innerHTML = “Selamat Belajar JavaScript”; yang berarti memasukkan tulisan “Selamat Belajar JavaScript” pada id yang dipilih.

Kode diatas kenapa kode JavaScript berada sebelum tag body, padahal pada seri sebelumnya kita menempatkan kode JavaScript didalam tag head. Karena pada kode tersebut memilih suatu element HTML, dan tujuan kode ditempatkan sebelum tag body supaya element yang dipilih sudah selesai di load oleh browser. Hasil dari kode diatas jika dibuka pada browser maka akan tempil seperti berikut :

Gambar Hasil Memilih Element Menggunakan ID

Memilih Element Menggunakan Nama Class

Untuk memilih element HTML menggunakan nama class pada JavaScript caranya hampir sama dengan memilih menggunakan ID. Caranya dengan menggunakan kode berikut :

Penulisannya juga harus sama persis, perhatikan huruf besar dan kecil. Pada “NamaClass” silakan kamu ganti nama kelas yang kamu pilih. Kemudian terdapat “[0]” merupakan nomor index, karena nama class pada HTML bisa lebih dari satu kita memerlukan nomor index untuk memilih nama class. Nomor index pada JavaScript dimulai dari angka nol (0) kemudian satu, dua, tiga, dan seterusnya. Jika nomor index nol berarti memilih nama kelas yang telah ditentukan pada paling awal, kemudian jika nomor index satu berarti memilih nama kelas yang ditentukan pada nomor dua, dan begitu selanjutnya. Untuk lebih jelas penerapan memilih element HTML menggunakan nama class pada JavaScript silakan lihat kode dibawah ini :

Pada contoh kode diatas baris nomor 8 dan 9 terdapat dua buah kelas dengan nama “wrap” kemudian kedua kelas tersebut akan dipilih oleh JavaScript (lihat baris nomor 12 dan 13) dengan kode document.getElementsByClassName(“wrap”)[0], kode tersebut berarti memilih nama class dengan nama wrap pada nomor index 0, nomor index nol berarti nama class wrap pertama yang urut dari atas yaitu pada baris nomor 8. Kemudian kode document.getElementsByClassName(“wrap”)[1] berarti memilih nama class wrap pada nomor index 1, nomor index 1 berarti setelah nomor index 0 yaitu pada baris nomor 9. Kode diatas jika dibuka pada browser maka akan tampil seperti berikut :

Gambar Hasil Memilih Element Menggunakan Nama Class

Memilih Element Menggunakan Nama Tag HTML

Untuk memilih element HTML dengan JavaScript menggunakan nama tag HTML caranya hampir sama dengan memilih menggunakan nama class, yaitu dengan menggunakan kode sebagai berikut :

Karena tag HTML yang sama bisa berisi lebih dari satu maka memilih element dengan JavaScript dengan cara ini memerlukan nomor index. Untuk penjelasan nomor index sama dengan pada memilih dengan menggunakan nama class, yaitu dimulai dari nol, satu, dua, dan seterusnya. Contoh kode memilih element menggunakan nama tag HTML dapat kamu lihat pada contoh dibawah ini :

Pada contoh kode diatas terdapat tiga buah tag paragraf kosong (baris nomor 8 – 10), tag itulah yang akan dipilih JavaScript. Pada baris nomor 13 – 15 terdapat kode JavaScript yang memilih tag HTML paragraf sesuai nomor index masing-masing. Dari kode diatas jika dibuka pada browser maka akan tampil sebagai berikut :

Gambar Hasil Memilih Element Menggunakan Nama Tag HTML

Demikian penjelasan cara memilih element (selector) HTML pada JavaScript apabila kamu memiliki pertanyaan silakan sampaikan di kolom komentar dibawah.


Kolom Komentar

Related Post