DOM Javascript

on


Berikut adalah tutorial DOM JavaScript yang dapat membantu Anda memahami bagaimana mengakses dan memanipulasi elemen HTML dengan JavaScript.

  1. DOM (Document Object Model)

DOM adalah representasi struktur dokumen HTML sebagai sebuah objek yang dapat diakses dan dimanipulasi dengan JavaScript. DOM terdiri dari sejumlah objek yang merepresentasikan setiap elemen HTML seperti tag, atribut, dan konten.

  1. Mengakses Elemen HTML

Untuk mengakses elemen HTML menggunakan JavaScript, pertama-tama kita harus menentukan elemen yang ingin diakses. Ada beberapa cara untuk mengakses elemen HTML, di antaranya:

  • document.getElementById(id) : mengambil elemen berdasarkan ID
  • document.getElementsByClassName(class) : mengambil elemen berdasarkan kelas
  • document.getElementsByTagName(tag) : mengambil elemen berdasarkan tag
  • document.querySelector(selector) : mengambil elemen berdasarkan selector CSS
  • document.querySelectorAll(selector) : mengambil semua elemen yang sesuai dengan selector CSS
  1. Memanipulasi Elemen HTML

Setelah kita berhasil mengakses elemen HTML menggunakan JavaScript, kita dapat memanipulasi elemen tersebut dengan berbagai cara, di antaranya:

  • Mengubah konten elemen HTML: dengan menggunakan metode innerHTML, kita dapat mengubah konten elemen HTML.
javascript
document.getElementById("demo").innerHTML = "Hello World!";
  • Mengubah atribut elemen HTML: dengan menggunakan metode setAttribute(), kita dapat mengubah nilai atribut elemen HTML.
javascript
document.getElementById("myImg").setAttribute("src", "newimage.jpg");
  • Menambah atau menghapus elemen HTML: dengan menggunakan metode createElement() dan appendChild(), kita dapat menambahkan elemen baru ke dalam dokumen HTML. Sedangkan, untuk menghapus elemen, kita dapat menggunakan metode removeChild().
javascript
var p = document.createElement("p");
var node = document.createTextNode("This is a new paragraph.");
p.appendChild(node);
var parent = document.getElementById("div1");
parent.appendChild(p);
  • Mengubah gaya elemen HTML: dengan menggunakan metode style, kita dapat mengubah properti gaya elemen HTML.
javascript
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.fontSize = "20px";
  1. Menangani Event

JavaScript juga dapat digunakan untuk menangani event seperti klik mouse, pengisian formulir, dan lain-lain. Ada beberapa metode yang dapat digunakan untuk menangani event seperti addEventListener(), removeEventListener(), dan onclick.

javascript
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Button clicked!");
});

Dalam contoh di atas, kita menambahkan event listener untuk elemen dengan ID "myBtn" dan menampilkan sebuah pesan ketika tombol tersebut diklik.

  1. Traversing DOM

Traversing DOM berarti bergerak melalui struktur DOM dari satu elemen ke elemen lain. Ada beberapa metode yang dapat digunakan untuk traversing DOM, di antaranya:

  • parentNode : mengambil elemen induk dari sebuah elemen
  • childNodes : mengambil semua anak dari sebuah elemen dalam bentuk NodeList
  • firstChild : mengambil anak pertama dari sebuah elemen
  • lastChild : mengambil anak terakhir dari sebuah elemen
  • nextSibling : mengambil elemen berikutnya dari elemen yang sama tingkatannya dalam hierarki DOM
  • previousSibling : mengambil elemen sebelumnya dari elemen yang sama tingkatannya dalam hierarki DOM
javascript
var parent = document.getElementById("parent");
var child = parent.firstChild;
while (child) {
    console.log(child.nodeName);
    child = child.nextSibling;
}

Dalam contoh di atas, kita mengambil elemen dengan ID "parent" dan mengambil semua anak dari elemen tersebut menggunakan metode childNodes. Kemudian, kita melakukan loop melalui semua elemen anak dan mencetak nama setiap elemen menggunakan metode nodeName.

  1. Manipulasi Class

Kita dapat menambahkan, menghapus, atau mengganti kelas elemen HTML dengan menggunakan JavaScript. Ada beberapa metode yang dapat digunakan untuk memanipulasi kelas elemen HTML, di antaranya:

  • add() : menambahkan kelas baru ke elemen
  • remove() : menghapus kelas dari elemen
  • toggle() : jika elemen tidak memiliki kelas tertentu, maka metode ini menambahkannya. Jika elemen sudah memiliki kelas tertentu, maka metode ini menghapusnya.
javascript
var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("active");

Dalam contoh di atas, kita mengambil elemen dengan ID "myElement" dan menambahkan kelas baru "newClass" menggunakan metode add(). Kemudian, kita menghapus kelas "oldClass" menggunakan metode remove(). Terakhir, kita memanggil metode toggle() untuk mengganti status kelas "active" dari elemen.

  1. Iterasi NodeList

NodeList adalah objek yang berisi daftar elemen yang ditemukan saat mencari elemen HTML menggunakan JavaScript. Ada beberapa metode yang dapat digunakan untuk iterasi NodeList, di antaranya:

  • item(index) : mengambil elemen pada indeks tertentu dalam NodeList
  • length : mengambil jumlah elemen dalam NodeList
javascript
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; i++) {
    console.log(elements.item(i).innerHTML);
}

Dalam contoh di atas, kita mengambil semua elemen "p" dalam dokumen HTML menggunakan metode getElementsByTagName(). Kemudian, kita melakukan loop melalui NodeList menggunakan indeks dan mencetak konten setiap elemen menggunakan metode innerHTML.

  1. Manipulasi Atribut

Kita dapat memanipulasi atribut dari elemen HTML menggunakan JavaScript. Ada beberapa metode yang dapat digunakan untuk memanipulasi atribut, di antaranya:

  • getAttribute(name) : mengambil nilai atribut dengan nama tertentu
  • setAttribute(name, value) : mengatur nilai atribut dengan nama tertentu
  • removeAttribute(name) : menghapus atribut dengan nama tertentu
javascript
var element = document.getElementById("myElement");
var value = element.getAttribute("data-value");
element.setAttribute("data-value", "new value");
element.removeAttribute("data-value");

Dalam contoh di atas, kita mengambil elemen dengan ID "myElement" dan mengambil nilai atribut "data-value" menggunakan metode getAttribute(). Kemudian, kita mengatur nilai atribut "data-value" menjadi "new value" menggunakan metode setAttribute(). Terakhir, kita menghapus atribut "data-value" menggunakan metode removeAttribute().

  1. Manipulasi Style

Kita dapat memanipulasi gaya elemen HTML menggunakan JavaScript. Ada beberapa metode yang dapat digunakan untuk memanipulasi gaya, di antaranya:

  • style.setProperty(name, value) : mengatur nilai properti gaya dengan nama tertentu
  • style.removeProperty(name) : menghapus properti gaya dengan nama tertentu
javascript
var element = document.getElementById("myElement");
element.style.setProperty("color", "red");
element.style.setProperty("font-size", "20px");
element.style.removeProperty("font-size");

Dalam contoh di atas, kita mengambil elemen dengan ID "myElement" dan mengatur properti gaya "color" menjadi "red" menggunakan metode setProperty(). Kemudian, kita mengatur properti gaya "font-size" menjadi "20px" menggunakan metode setProperty(). Terakhir, kita menghapus properti gaya "font-size" menggunakan metode removeProperty().

  1. Manipulasi Konten

Kita dapat memanipulasi konten elemen HTML menggunakan JavaScript. Ada beberapa properti yang dapat digunakan untuk memanipulasi konten, di antaranya:

  • innerHTML : mengambil atau mengatur konten HTML dari elemen
  • innerText : mengambil atau mengatur konten teks dari elemen
  • textContent : mengambil atau mengatur konten teks dari elemen dan semua elemen turunannya
javascript
var element = document.getElementById("myElement");
element.innerHTML = "<h1>New Heading</h1>";
element.innerText = "New Text";
element.textContent = "New Text Content";

Dalam contoh di atas, kita mengambil elemen dengan ID "myElement" dan mengatur konten HTML menjadi "<h1>New Heading</h1>" menggunakan properti innerHTML. Kemudian, kita mengatur konten teks menjadi "New Text" menggunakan properti innerText. Terakhir, kita mengatur konten teks dari elemen dan semua elemen turunannya menjadi "New Text Content" menggunakan properti textContent.

  1. Manipulasi Kelas

Kita dapat memanipulasi kelas dari elemen HTML menggunakan JavaScript. Ada beberapa metode yang dapat digunakan untuk memanipulasi kelas, di antaranya:

  • classList.add(name) : menambahkan kelas dengan nama tertentu ke elemen
  • classList.remove(name) : menghapus kelas dengan nama tertentu dari elemen
  • classList.toggle(name) : menambahkan kelas dengan nama tertentu jika tidak ada, atau menghapusnya jika sudah ada
  • classList.contains(name) : mengecek apakah elemen memiliki kelas dengan nama tertentu
javascript
var element = document.getElementById("myElement");
element.classList.add("active");
element.classList.remove("inactive");
element.classList.toggle("highlight");
var hasClass = element.classList.contains("active");

Dalam contoh di atas, kita mengambil elemen dengan ID "myElement" dan menambahkan kelas "active" menggunakan metode add(). Kemudian, kita menghapus kelas "inactive" menggunakan metode remove(). Selanjutnya, kita menambahkan kelas "highlight" jika tidak ada atau menghapusnya jika sudah ada menggunakan metode toggle(). Terakhir, kita mengecek apakah elemen memiliki kelas "active" menggunakan metode contains().

  1. Manipulasi Parent dan Child Nodes

Kita dapat memanipulasi parent dan child nodes dari elemen HTML menggunakan JavaScript. Ada beberapa properti dan metode yang dapat digunakan untuk memanipulasi parent dan child nodes, di antaranya:

  • parentNode : properti untuk mengakses parent node dari elemen
  • children : properti untuk mengakses child nodes dari elemen
  • appendChild(node) : menambahkan node sebagai child terakhir dari elemen
  • insertBefore(newNode, referenceNode) : menambahkan node sebelum node referensi sebagai child dari elemen
  • removeChild(node) : menghapus node sebagai child dari elemen
javascript
var element = document.getElementById("myElement");
var parent = element.parentNode;
var children = element.children;
var newElement = document.createElement("p");
var textNode = document.createTextNode("New Text");
newElement.appendChild(textNode);
element.appendChild(newElement);
var referenceNode = element.children[0];
element.insertBefore(newElement, referenceNode);
element.removeChild(newElement);

Dalam contoh di atas, kita mengambil elemen dengan ID "myElement" dan mengakses parent node dan child nodes menggunakan properti parentNode dan children. Kemudian, kita membuat elemen baru menggunakan metode createElement() dan membuat node teks baru menggunakan metode createTextNode(). Selanjutnya, kita menambahkan elemen baru sebagai child terakhir menggunakan metode appendChild(). Kemudian, kita menambahkan elemen baru sebelum node referensi menggunakan metode insertBefore(). Terakhir, kita menghapus elemen baru menggunakan metode removeChild().

  1. Event Handling

Kita dapat menangani event pada elemen HTML menggunakan JavaScript. Ada beberapa metode yang dapat digunakan untuk menangani event, di antaranya:

  • addEventListener(event, function) : menambahkan event listener untuk event tertentu pada elemen
  • removeEventListener(event, function) : menghapus event listener untuk event tertentu pada elemen
javascript
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});
button.removeEventListener("click", function() {
  alert("Button clicked!");
});

Dalam contoh di atas, kita mengambil elemen button dengan ID "my Button" dan menambahkan event listener untuk event "click" menggunakan metode addEventListener(). Ketika button diklik, sebuah alert box akan muncul dengan pesan "Button clicked!". Kemudian, kita menghapus event listener untuk event "click" menggunakan metode removeEventListener().

  1. Ajax

Ajax (Asynchronous JavaScript and XML) adalah teknik untuk melakukan request dan menerima response dari server secara asynchronous (tanpa melakukan reload halaman). Kita dapat menggunakan Ajax untuk mengambil data dari server dan menampilkan data tersebut pada halaman tanpa melakukan reload halaman.

Untuk menggunakan Ajax, kita dapat menggunakan metode XMLHttpRequest() atau fetch(). Berikut adalah contoh penggunaan Ajax dengan metode fetch().

javascript
fetch("https://jsonplaceholder.typicode.com/posts")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

Dalam contoh di atas, kita menggunakan metode fetch() untuk mengambil data dari URL https://jsonplaceholder.typicode.com/posts. Kemudian, kita mengubah response menjadi objek JSON menggunakan metode json(). Selanjutnya, kita menampilkan data tersebut pada console menggunakan metode log(). Jika terjadi error, maka error tersebut akan ditampilkan pada console menggunakan metode error().

  1. Local Storage

Local storage adalah fitur pada browser yang memungkinkan kita untuk menyimpan data pada browser secara lokal. Data yang disimpan pada local storage akan tetap tersedia meskipun browser ditutup atau halaman di-refresh.

Untuk menyimpan data pada local storage, kita dapat menggunakan metode setItem(). Untuk mengambil data dari local storage, kita dapat menggunakan metode getItem(). Berikut adalah contoh penggunaan local storage.

javascript
localStorage.setItem("name", "John");
var name = localStorage.getItem("name");
console.log(name);

Dalam contoh di atas, kita menyimpan data "John" dengan key "name" pada local storage menggunakan metode setItem(). Kemudian, kita mengambil data tersebut dari local storage menggunakan metode getItem() dan menampilkan data tersebut pada console menggunakan metode log().

Demikianlah tutorial DOM JavaScript. Semoga bermanfaat!

Comments

Post a Comment