DOM (Document Object Model) Selector

DOM (Document Object Model) Selector digunakan untuk menyeleksi elemen dari suatu halaman web. perhatikan script dibawah ini.

Pada script diatas, kita memiliki beberapa elemen yang terdiri dari heading, list, image, paragraph, dll. Bagaimanakah caranya kita menyeleksi tulisan ‘Sport’ pada list diatas dengan menggunakan javascript? atau Bagaimana caranya kita mengganti judul ‘Mengenal DOM’ dengan menggunakan javascript?

Untuk menjawab semua pertanyaan diatas, terlebih dahulu kita harus melakukan proses penyeleksian elemen. Dimana proses tersebut bertujuan untuk melakukan modifikasi seperti merubah attribut, menambahkan class,  merubah style, text dan masih banyak lagi perubahan yang bisa kita lakukan. Untuk melakukan proses tersebut maka dibutuhkan suatu pengenal atau identitas dari suatu elemen yang bisa kita sebut sebagai DOM Selector. 

Dalam artikel sebelumnya, saya pernah menulis tentang CSS Selector. Apa itu CSS Selector? Bagaimana cara kerjanya? Hubungannya apa sama DOM Selector? biar gak penasaran, rekan-rekan bisa kunjungi link berikut ini untuk mempelajari kembali CSS Selector.

Pada Javascript DOM Selector bisa kita lakukan dengan beberapa cara, diantaranya :

  1. Get Element by ID 
    Get Element by ID digunakan untuk menyeleksi elemen dengan menggunakan ID pada element tersebut. Sintaks yang digunakan adalah :

    Sintaks diatas akan mengembalikan nilai null jika tidak terdapat elemen dengan id tersebut. Contoh penggunaan :

    Catatan : element ID harus unik dalam satu halaman web. Jika terdapat beberapa elemen dengan id yang sama, maka salah satunya tidak akan di proses. Berbeda halnya jika kita menggunakan iframe, karena iframe itu pada dasarnya menggunakan halaman yang berbeda
  2. Get Element by Class Attribute 
    Get Element by Class digunakan untuk menyeleksi elemen dengan menggunakan Class pada suatu elemen. Sintaks yang digunakan adalah :

    Sintaks diatas akan menyeleksi semua elemen yang memiliki class dengan nama ‘namaKelas’. Selector ini akan mengembalikan/return berupa list/collection dalam bentuk array.  Masih ingat dengan materi class dalam pembelajaran css? value class dalam sebuah elemen bisa terdiri dari beberapa class dipisahkan dengan koma. contohnya : “aa abb”, ini berarti elemen ini memiliki class “aa” dan juga “bb”. Perhatikan contoh dibawah ini:
  3. Get Element by Name 
    Get element by Name digunakan untuk menyeleksi elemen berdasarkan attribute name pada elemen/tag (name=”name_value“) Sintaks yang digunakan adalah :

    Seperti halnya getElementbyClassName, selector ini juga akan mengembalikan/return berupa list/collection dalam bentuk array.
    perhatikan contoh html dibawah ini :

    berikut ini kode javascript yang akan kita buat untuk menyeleksi elemen dengan nama “xyz” yang terletak pada elemen kedua.
  4. Get Element by Tag Name  
    Get element by tag name digunakan untuk menyeleksi elemen berdasarkan nama tag/elemen pada HTML. contoh nama tag yang sering kita jumpai misalnya : div,header,footer,section, ol, li, dll. Sintaks yang digunakan adalah :

    Seperti halnya selector sebelumnya, selector ini juga akan mengembalikan/return berupa list/collection dalam bentuk array. perhatikan contoh dibawah ini :

    Catatan : getElementsByClassName, getElementsByName,  adan getElementsByTagName  tidak bersifat unik, sehingga dalam satu halaman biasanya ditemukan beberapa elemen dengan key tersebut. Oleh karena itu, jika kita menggunakan selector ini, maka return yang dikembalikan berupa list array. 
  5. Get Elements by CSS Selector
    Get element by CSS Selector menyeleksi elemen dengen menggunakan CSS Selector. Sintaks yang digunakan untuk menyeleksi elemen denganCSS Selector ini adalah:

    sintaks diatas digunakan untuk menyeleksi elemen pertama yang menggunakan CSS selector yang kita gunakan.

    sedangkan sintaks diatas digunakan untuk menyeleksi semua elemen menggunakan CSS selector yang kita gunakan.

    Perhatikan contoh berikut ini :

Demikianlah penjelasan mengenai DOM Selector pada Javascript. jika rekan-rekan mendapatkan kesalahan atau sekedar ingin menyampaikan pertanyaan terkait materi diatas, silakan kirim melalui form disquss dibawah ini. Dengan senang hati saya akan menerimanya.

Terima Kasih