Javascript DOM Selection (Penelusuran DOM)

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.

---

Thumnail

Jenis-Jenis DOM Selection Method

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

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

Tabel

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.