W3schools Javascript Dom Manipulation

W3schools Javascript Dom Manipulation

4 min read Jun 18, 2024
W3schools Javascript Dom Manipulation

W3Schools JavaScript DOM Manipulation

W3Schools adalah sumber daya yang bagus untuk mempelajari dasar-dasar JavaScript, termasuk manipulasi Document Object Model (DOM). DOM adalah representasi struktural dari halaman web HTML, yang memungkinkan JavaScript untuk berinteraksi dengan elemen-elemen halaman web.

Berikut adalah beberapa cara umum untuk memanipulasi DOM menggunakan JavaScript, seperti yang dijelaskan di W3Schools:

Mengakses Elemen

  • getElementById(): Metode ini digunakan untuk mendapatkan elemen HTML dengan ID tertentu.
const element = document.getElementById("myElement");
  • getElementsByTagName(): Metode ini mengembalikan koleksi semua elemen HTML dengan nama tag tertentu.
const elements = document.getElementsByTagName("p");
  • getElementsByClassName(): Metode ini mengembalikan koleksi semua elemen HTML dengan kelas tertentu.
const elements = document.getElementsByClassName("myClass");
  • querySelector(): Metode ini mengambil elemen pertama yang cocok dengan selektor CSS yang diberikan.
const element = document.querySelector("#myElement");
  • querySelectorAll(): Metode ini mengambil semua elemen yang cocok dengan selektor CSS yang diberikan.
const elements = document.querySelectorAll(".myClass");

Memodifikasi Elemen

  • innerHTML: Properti ini digunakan untuk mengatur atau mendapatkan konten HTML dari elemen.
element.innerHTML = "New content";
  • textContent: Properti ini digunakan untuk mengatur atau mendapatkan konten teks dari elemen.
element.textContent = "New text content";
  • style: Properti ini digunakan untuk mengakses dan memodifikasi gaya CSS dari elemen.
element.style.color = "red";
  • className: Properti ini digunakan untuk mengatur atau mendapatkan kelas CSS dari elemen.
element.className = "newClass";

Memanipulasi Elemen

  • createElement(): Metode ini digunakan untuk membuat elemen HTML baru.
const newElement = document.createElement("p");
  • appendChild(): Metode ini digunakan untuk menambahkan elemen anak ke elemen induk.
parentElement.appendChild(newElement);
  • insertBefore(): Metode ini digunakan untuk menyisipkan elemen sebelum elemen yang ditentukan.
parentElement.insertBefore(newElement, existingElement);
  • removeChild(): Metode ini digunakan untuk menghapus elemen anak dari elemen induk.
parentElement.removeChild(existingElement);

Event Handling

W3Schools juga menjelaskan tentang event handling, yaitu cara menangani kejadian yang terjadi pada elemen HTML, seperti klik, mouseover, dan submit.

element.addEventListener("click", function() {
  // Handle click event
});

Contoh

// Buat paragraf baru
const newParagraph = document.createElement("p");
newParagraph.textContent = "Ini paragraf baru";

// Tambahkan paragraf baru ke elemen dengan ID "myContainer"
const container = document.getElementById("myContainer");
container.appendChild(newParagraph);

// Ubah warna teks paragraf baru
newParagraph.style.color = "blue";

Kesimpulan

W3Schools menyediakan sumber daya yang lengkap dan mudah dipahami untuk mempelajari manipulasi DOM dalam JavaScript. Tutorial dan contoh yang diberikan akan membantu Anda untuk memahami konsep-konsep dasar dan menerapkannya dalam proyek Anda. Dengan menguasai manipulasi DOM, Anda dapat membangun aplikasi web yang dinamis dan interaktif.

Related Post