Javascript DOM Selection (Penelusuran DOM)

ByMukhlis MJ

Kenapa Penting Memahami DOM Selection?

Bayangkan sebuah ruangan berisi banyak orang, tetapi Anda hanya ingin berbicara dengan “Mahasiswa bernama Mukhlis.” Anda perlu cara untuk memilih Mukhlis dari keramaian. Begitu juga di dalam dokumen HTML yang berisi banyak elemen, kita membutuhkan metode untuk memilih elemen yang tepat.

penelusuran dom (dom selection), javascript, mukhlis mj
Thumnail

Jenis-Jenis DOM Selection Method

Ada beberapa jenis DOM Selection Method yang bisa kita gunakan, diantaranya:

  • getElementById (" ")
  • getElementsByClassName (" ")
  • getElementsByTagName (" ")
  • querySelector (" ")
  • querySelectorAll (" ")

Tabel

.tg {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-wman{border-color:#c0c0c0;text-align:center;vertical-align:middle}
.tg .tg-dgrx{border-color:#c0c0c0;font-weight:bold;position:-webkit-sticky;position:sticky;text-align:center;top:-1px;
vertical-align:middle;will-change:transform}
.tg .tg-ve35{border-color:#c0c0c0;text-align:left;vertical-align:middle}
.tg .tg-m95f{border-color:#c0c0c0;font-weight:bold;position:-webkit-sticky;position:sticky;text-align:center;top:-1px;
vertical-align:top;will-change:transform}
.tg .tg-wo29{border-color:#c0c0c0;text-align:left;vertical-align:top}
.tg .tg-fzdr{border-color:#c0c0c0;text-align:center;vertical-align:top}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}

Methode Hasil Catatan
getElementById(” “) element Paling cepat. ID harus unik
getElementByClassName(” “) HTMLColection Memilih element berdasarkan Class
getElementByTagName(” “) HTMLColection Memilih element berdasarkan Tag
querySelector (” “) element Fleksibel
querySelectorAll (” “) nodeList Mendukung metode array

DOM Selection dengan getElementById

Metode ini digunakan untuk memilih SATU elemen berdasarkan atribut id.

  • Sintaks:
    JavaScript
    
  
document.getElementById("id")

  • Contoh:
    HTML
    
  
<h1 id="judul">Selamat Datang!</h1>

    JavaScript
    
  
const judul = document.getElementById("judul");
console.log(judul.textContent); // Output: Selamat Datang!
Analoginya: Ini seperti memanggil mahasiswa berdasarkan NIM (Nomor Identitas Mahasiswa) yang unik.

DOM Selection dengan getElementsByClassName

Metode ini digunakan untuk memilih KUMPULAN elemen berdasarkan nama kelas.

  • Sintaks:
    JavaScript
    
  
document.getElementsByClassName("class-name")
  • Contoh:
    HTML
    
  
<p class="paragraf">Paragraf 1</p>
<p class="paragraf">Paragraf 2</p>

    JavaScript
    
  
const paragraf = document.getElementsByClassName("paragraf");
console.log(paragraf[0].textContent); // Output: Paragraf 1

Catatan Penting: Hasil dari metode ini adalah HTMLCollection, yang mirip array tetapi bukan array.

Analoginya: Ini seperti memanggil mahasiswa berdasarkan kelasnya. Semua mahasiswa di kelas yang sama akan dipilih.

DOM Selection dengan getElementsByTagName

Metode ini digunakan untuk memilih KUMPULAN elemen berdasarkan nama tag HTML.

  • Sintaks:
    JavaScript
    
  
document.getElementsByTagName("tag-name")
  • Contoh:
    HTML
    
  
<h1>Judul 1</h1>
<h1>Judul 2</h1>

    JavaScript
    
  
const headings = document.getElementsByTagName("h1");
console.log(headings.length); // Output: 2
Analoginya: Ini seperti memanggil semua mahasiswa yang sedang duduk di meja tertentu.

DOM Selection dengan querySelector

Metode ini digunakan untuk memilih SATU elemen berdasarkan selektor CSS.

Metode ini sangat fleksibel karena bisa menggunakan ID, kelas, tag, atau bahkan selektor kompleks.

  • Sintaks:
    JavaScript
    
  
document.querySelector("selector")
  • Contoh:
    HTML
    
  
<p id="paragraf1" class="paragraf">Teks 1</p>
<p id="paragraf2" class="paragraf">Teks 2</p>

    JavaScript
    
  
const teks1 = document.querySelector(".paragraf");
console.log(teks1.textContent); // Output: Teks 1
Analoginya: Seperti memanggil mahasiswa pertama yang memenuhi kriteria tertentu.

DOM Selection dengan querySelectorAll

Metode ini digunakan untuk memilih SEMUA elemen yang cocok dengan selektor CSS.

  • Sintaks:
    JavaScript
    
  
document.querySelectorAll("selector")
  • Contoh:
    HTML
    
  
<p class="paragraf">Teks 1</p>
<p class="paragraf">Teks 2</p>

    JavaScript
    
  
const allParagraphs = document.querySelectorAll(".paragraf");
allParagraphs.forEach((p) => console.log(p.textContent));
Catatan Penting: Hasil dari metode ini adalah NodeList, yang mendukung metode array seperti .forEach().
Analoginya: Ini seperti memanggil semua mahasiswa yang sesuai dengan kriteria tertentu.

Nah, itulah materi kita pada artikel kali ini mengenai DOM Selection (Pemilihan DOM). Semoga bermanfaat dan jangan lupa di coba agar lebih cepat memahaminya.

Similar Posts