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.

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.