Tutorial JavaScript: Memahami Konsep DOM

Published by Fazry on

1. Pendahuluan

JavaScript adalah salah satu bahasa pemrograman yang paling populer dan esensial dalam pengembangan web modern. Dikenal karena fleksibilitas dan kemampuannya dalam memperkaya interaktivitas halaman web, JavaScript memainkan peran krusial dalam membangun pengalaman pengguna yang dinamis dan responsif. Sebagai bahasa pemrograman yang berjalan di sisi klien (client-side), JavaScript memungkinkan pengembang untuk menulis kode yang dieksekusi langsung oleh browser pengguna, memungkinkan manipulasi elemen HTML, validasi formulir, animasi, dan banyak lagi tanpa memerlukan pemuatan ulang halaman web.

Daftar Isi

Salah satu konsep fundamental yang harus dipahami oleh setiap pengembang JavaScript adalah Document Object Model (DOM). DOM adalah representasi berbasis objek dari dokumen HTML atau XML yang dimuat di dalam browser. Ini menyediakan antarmuka pemrograman yang memungkinkan JavaScript untuk mengakses dan memanipulasi struktur, gaya, dan konten dokumen. Dengan DOM, pengembang dapat membuat, menghapus, atau memodifikasi elemen dan atribut, yang memungkinkan pengembangan halaman web yang lebih dinamis dan interaktif. Pentingnya DOM tidak dapat diabaikan karena hampir setiap aspek dari interaktivitas halaman web yang modern bergantung pada manipulasi DOM.

Tujuan dari tutorial ini adalah untuk membantu Anda memahami konsep dasar dari DOM dan bagaimana berinteraksi dengannya menggunakan JavaScript. Anda akan mempelajari cara mengakses elemen DOM, memanipulasi konten dan atribut elemen, serta menambahkan dan menghapus elemen dari halaman. Selain itu, tutorial ini akan menjelaskan bagaimana menangani event untuk membuat halaman web yang lebih responsif dan interaktif. Dengan pemahaman yang kuat tentang DOM, Anda akan memiliki dasar yang solid untuk mengembangkan aplikasi web yang lebih canggih dan user-friendly.

2. Apa Itu DOM?

DOM, atau Document Object Model, adalah antarmuka pemrograman yang memungkinkan skrip seperti JavaScript untuk mengakses dan memperbarui konten, struktur, dan gaya dokumen. DOM merepresentasikan dokumen HTML atau XML sebagai sekumpulan objek yang dapat dimanipulasi secara dinamis. Dengan kata lain, DOM adalah cara bagi JavaScript untuk berinteraksi dengan halaman web, memungkinkan perubahan yang dapat dilihat dan direspon oleh pengguna tanpa harus memuat ulang halaman secara keseluruhan.

Struktur dasar DOM dapat diibaratkan seperti pohon objek. Setiap elemen dalam dokumen HTML atau XML diwakili sebagai node dalam pohon ini. Dokumen itu sendiri merupakan node akar, dari mana semua elemen lain bercabang sebagai node anak. Elemen-elemen seperti <div>, <p>, <a>, dan lainnya adalah node elemen, sementara teks dalam elemen tersebut adalah node teks. Struktur pohon ini memungkinkan pengembang untuk mengakses dan memanipulasi bagian tertentu dari dokumen dengan cara yang terorganisir dan hierarkis. Misalnya, elemen <body> adalah anak dari elemen <html>, dan elemen <p> di dalam <body> adalah anak dari <body>.

Di dalam DOM, ada tiga komponen utama: elemen, node, dan atribut. Elemen adalah bagian-bagian dokumen yang ditandai dengan tag HTML seperti <div>, <span>, atau <a>. Setiap elemen dianggap sebagai node dalam struktur pohon DOM. Node adalah unit dasar dari struktur DOM dan mencakup elemen, teks, dan komentar. Setiap node memiliki sifat dan metode yang dapat digunakan untuk memanipulasi dokumen. Atribut adalah informasi tambahan yang melekat pada elemen dan memberikan detail tambahan atau memodifikasi perilaku elemen tersebut. Misalnya, atribut class atau id pada elemen HTML dapat digunakan untuk menerapkan gaya CSS atau mengidentifikasi elemen tertentu untuk manipulasi lebih lanjut dengan JavaScript.

Memahami konsep-konsep ini adalah kunci untuk bekerja efektif dengan DOM dan JavaScript. Dengan menguasai cara DOM merepresentasikan dokumen dan bagaimana elemen, node, dan atribut berinteraksi dalam struktur pohon, Anda akan dapat membuat halaman web yang lebih dinamis dan responsif.

3. Menjelajahi Struktur DOM

Untuk memahami cara kerja DOM, penting untuk mulai dengan melihat contoh struktur HTML sederhana. Misalkan kita memiliki kode HTML berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh DOM Sederhana</title>
  </head>
  <body>
    <div id="container">
      <h1>Selamat Datang!</h1>
      <p>Ini adalah contoh sederhana dari struktur DOM.</p>
      <a href="https://www.example.com">Kunjungi situs kami</a>
    </div>
  </body>
</html>Code language: HTML, XML (xml)

Dalam contoh ini, dokumen HTML terdiri dari elemen-elemen seperti <html>, <head>, <title>, <body>, <div>, <h1>, <p>, dan <a>. Setiap elemen ini adalah node dalam pohon DOM, dan mereka memiliki hubungan hierarkis yang dapat diuraikan sebagai berikut: elemen <html> adalah elemen akar yang membungkus seluruh dokumen; di dalamnya terdapat elemen <head> dan <body>, yang masing-masing memiliki anak-anaknya sendiri.

Memahami hierarki dan hubungan antar elemen dalam DOM adalah kunci untuk memanipulasi dokumen dengan efektif. Setiap elemen dalam DOM memiliki hubungan dengan elemen lainnya yang dapat digambarkan sebagai parent (induk), child (anak), dan sibling (saudara). Dalam contoh di atas, <html> adalah parent dari <head> dan <body>, yang berarti <head> dan <body> adalah children dari <html>. Demikian pula, <div> adalah parent dari <h1>, <p>, dan <a>, dan ketiga elemen ini adalah siblings satu sama lain karena mereka berbagi parent yang sama.

Untuk menjelajahi dan memanipulasi struktur DOM secara praktis, kita dapat menggunakan alat yang disediakan oleh browser, yaitu Developer Tools. Semua browser modern seperti Chrome, Firefox, dan Edge memiliki Developer Tools yang memungkinkan pengembang untuk memeriksa dan memodifikasi DOM secara langsung. Untuk membuka Developer Tools, Anda dapat menekan F12 atau klik kanan pada halaman web dan pilih “Inspect” atau “Inspect Element”.

Di dalam Developer Tools, Anda akan melihat tampilan visual dari struktur DOM dokumen yang saat ini dimuat. Elemen-elemen ditampilkan dalam bentuk pohon yang dapat diperluas dan diperkecil, mirip dengan representasi hierarkis dalam HTML. Anda dapat memilih elemen tertentu untuk melihat atribut, gaya yang diterapkan, dan bahkan memodifikasi konten dan atribut secara langsung. Misalnya, Anda bisa mengklik elemen <p> dalam panel Elements untuk mengubah teksnya atau menambahkan atribut baru. Alat ini juga menyediakan konsol JavaScript yang memungkinkan Anda menulis dan menjalankan kode JavaScript untuk memanipulasi DOM secara langsung, memberikan cara yang kuat untuk bereksperimen dan belajar tentang DOM.

Dengan menggunakan Developer Tools, Anda dapat memperoleh wawasan mendalam tentang bagaimana halaman web diatur dan bagaimana berbagai elemen berinteraksi satu sama lain. Pengetahuan ini sangat berharga ketika Anda mulai menulis JavaScript yang berinteraksi dengan DOM untuk membuat halaman web yang lebih dinamis dan interaktif.

4. Mengakses Elemen DOM dengan JavaScript

Untuk memanipulasi elemen-elemen dalam DOM menggunakan JavaScript, langkah pertama adalah mengakses elemen-elemen tersebut. JavaScript menyediakan beberapa metode dasar untuk mengakses elemen DOM, masing-masing dengan kegunaannya sendiri.

getElementById()

Metode getElementById() adalah salah satu cara paling umum dan efisien untuk mengakses elemen DOM. Metode ini mengambil elemen berdasarkan nilai atribut id yang unik dalam dokumen. Misalnya, jika Anda memiliki elemen berikut dalam HTML:

<div id="container">...</div>Code language: HTML, XML (xml)

Anda bisa mengakses elemen ini dengan JavaScript seperti berikut:

let container = document.getElementById('container');Code language: JavaScript (javascript)

Metode ini sangat cepat karena hanya mencari satu elemen yang memiliki id yang diberikan.

getElementsByClassName()

Metode getElementsByClassName() mengembalikan koleksi semua elemen dalam dokumen dengan kelas tertentu. Metode ini berguna saat Anda ingin mengakses semua elemen yang berbagi kelas yang sama. Misalnya:

<div class="item">Item 1</div>
<div class="item">Item 2</div>Code language: HTML, XML (xml)

Anda bisa mengakses elemen-elemen ini dengan JavaScript seperti berikut:

let items = document.getElementsByClassName('item');Code language: JavaScript (javascript)

Hasilnya adalah koleksi elemen yang dapat diakses seperti array.

getElementsByTagName()

Metode getElementsByTagName() mengembalikan koleksi semua elemen dengan nama tag tertentu. Ini berguna untuk mengambil semua elemen dari jenis yang sama, seperti semua elemen <p> dalam dokumen. Misalnya:

<p>Paragraph 1</p>
<p>Paragraph 2</p>Code language: HTML, XML (xml)

Anda bisa mengakses elemen-elemen ini dengan JavaScript seperti berikut:

let paragraphs = document.getElementsByTagName('p');Code language: JavaScript (javascript)

Seperti getElementsByClassName(), hasilnya adalah koleksi elemen yang dapat diakses seperti array.

querySelector() dan querySelectorAll()

Metode querySelector() dan querySelectorAll() adalah cara yang lebih fleksibel dan kuat untuk mengakses elemen DOM. querySelector() mengembalikan elemen pertama yang cocok dengan selektor CSS yang diberikan, sedangkan querySelectorAll() mengembalikan NodeList dari semua elemen yang cocok dengan selektor tersebut. Misalnya:

<div class="container">
  <p class="item">Item 1</p>
  <p class="item">Item 2</p>
</div>Code language: HTML, XML (xml)

Anda bisa mengakses elemen-elemen ini dengan JavaScript seperti berikut:

let firstItem = document.querySelector('.item'); // Mengambil elemen pertama dengan kelas "item"
let allItems = document.querySelectorAll('.item'); // Mengambil semua elemen dengan kelas "item"Code language: JavaScript (javascript)

querySelector() dan querySelectorAll() sangat berguna karena mereka mendukung berbagai selektor CSS yang kompleks, memungkinkan Anda untuk memilih elemen berdasarkan kelas, id, atribut, atau kombinasi lainnya.

Contoh Praktis Penggunaan

Mari kita lihat beberapa contoh praktis untuk menggunakan metode-metode ini:

  1. Mengubah Teks Elemen dengan getElementById():
   let header = document.getElementById('header');
   header.innerText = 'Selamat Datang di KodeKeren!';Code language: JavaScript (javascript)
  1. Menambahkan Kelas dengan getElementsByClassName():
   let elements = document.getElementsByClassName('highlight');
   for (let element of elements) {
     element.classList.add('active');
   }Code language: JavaScript (javascript)
  1. Mengubah Gaya dengan getElementsByTagName():
   let paragraphs = document.getElementsByTagName('p');
   for (let p of paragraphs) {
     p.style.color = 'blue';
   }Code language: JavaScript (javascript)
  1. Memilih Elemen Spesifik dengan querySelector():
   let firstItem = document.querySelector('.list-item:first-child');
   firstItem.style.fontWeight = 'bold';Code language: JavaScript (javascript)
  1. Memilih Semua Elemen dengan querySelectorAll():
   let allItems = document.querySelectorAll('.list-item');
   allItems.forEach(item => {
     item.style.backgroundColor = 'lightgray';
   });Code language: JavaScript (javascript)

Dengan menggunakan metode-metode ini, Anda dapat dengan mudah mengakses dan memanipulasi elemen-elemen dalam DOM untuk menciptakan interaktivitas yang kaya dan responsif di halaman web Anda.

5. Memanipulasi Elemen DOM

Setelah Anda mengakses elemen-elemen DOM dengan JavaScript, langkah berikutnya adalah memanipulasi elemen-elemen tersebut. Manipulasi ini meliputi mengubah konten teks dan HTML elemen, mengubah atribut elemen, serta mengubah gaya elemen. Berikut adalah beberapa teknik dasar yang digunakan untuk manipulasi elemen DOM.

Mengubah Konten Teks dan HTML Elemen

Salah satu manipulasi paling umum adalah mengubah konten teks atau HTML elemen. JavaScript menyediakan beberapa properti untuk tujuan ini:

  • innerText vs innerHTML:
  • innerText mengatur atau mengambil konten teks dari sebuah elemen, mengabaikan tag HTML di dalamnya. Ini hanya menampilkan teks yang terlihat oleh pengguna dan tidak termasuk teks tersembunyi.
  • innerHTML mengatur atau mengambil konten HTML dari sebuah elemen, termasuk tag HTML di dalamnya. Ini memungkinkan Anda untuk menyisipkan atau memodifikasi HTML yang lebih kompleks. Misalnya, jika Anda memiliki elemen berikut:
  <div id="example">Hello <span>World</span>!</div>Code language: HTML, XML (xml)

Anda bisa mengubah kontennya dengan:

  let example = document.getElementById('example');
  example.innerText = 'Hi there!';  // Output: Hi there!
  example.innerHTML = 'Hi <strong>there</strong>!';  // Output: Hi <strong>there</strong>!Code language: JavaScript (javascript)
  • textContent:
  • textContent mengatur atau mengambil semua teks dalam elemen dan semua anak-anaknya, termasuk teks tersembunyi. Ini mirip dengan innerText tetapi lebih cepat karena tidak memicu rendering dan styling ulang. Contoh penggunaan textContent:
  example.textContent = 'Hello everyone!';  // Output: Hello everyone!Code language: JavaScript (javascript)

Mengubah Atribut Elemen

Mengubah atribut elemen juga merupakan tugas umum dalam manipulasi DOM. JavaScript menyediakan metode untuk mengatur, mengambil, dan menghapus atribut elemen:

  • setAttribute(): Menyetel nilai atribut elemen.
  let link = document.querySelector('a');
  link.setAttribute('href', 'https://www.example.com');Code language: JavaScript (javascript)
  • getAttribute(): Mengambil nilai atribut elemen.
  let hrefValue = link.getAttribute('href');
  console.log(hrefValue);  // Output: https://www.example.comCode language: JavaScript (javascript)
  • removeAttribute(): Menghapus atribut elemen.
  link.removeAttribute('href');Code language: JavaScript (javascript)

Mengubah Gaya Elemen

Mengubah gaya elemen dapat dilakukan dengan menggunakan properti style dan metode classList:

  • Menggunakan Properti style:
    Properti style memungkinkan Anda mengatur gaya CSS secara langsung pada elemen. Ini berguna untuk perubahan gaya yang spesifik dan dinamis.
  let paragraph = document.querySelector('p');
  paragraph.style.color = 'blue';
  paragraph.style.fontSize = '20px';Code language: JavaScript (javascript)
  • Menambah dan Menghapus Kelas Menggunakan classList:
    Metode classList menyediakan cara yang mudah dan efisien untuk menambah, menghapus, dan memeriksa kelas pada elemen. Ini lebih disukai daripada mengubah properti className secara langsung karena classList menjaga kelas yang sudah ada dan memungkinkan manipulasi yang lebih fleksibel.
  • Menambah Kelas: paragraph.classList.add('highlight');
  • Menghapus Kelas: paragraph.classList.remove('highlight');
  • Memeriksa Kelas: if (paragraph.classList.contains('highlight')) { console.log('Paragraph memiliki kelas highlight'); }
  • Toggle Kelas:
    javascript paragraph.classList.toggle('highlight');

Dengan menguasai teknik-teknik dasar ini, Anda akan mampu memanipulasi elemen-elemen dalam DOM secara efektif. Mengubah konten, atribut, dan gaya elemen memungkinkan Anda untuk membuat halaman web yang interaktif dan dinamis, memberikan pengalaman pengguna yang lebih baik.

6. Menambahkan dan Menghapus Elemen DOM

Manipulasi elemen DOM tidak hanya terbatas pada mengubah konten atau atribut elemen yang ada. Sering kali, Anda perlu menambahkan elemen baru atau menghapus elemen yang sudah ada. JavaScript menyediakan metode yang memungkinkan Anda untuk melakukan ini dengan mudah.

Membuat Elemen Baru dengan createElement()

Untuk menambahkan elemen baru ke dalam DOM, langkah pertama adalah membuat elemen tersebut menggunakan metode createElement(). Metode ini membuat elemen baru yang belum terpasang pada dokumen.

Misalnya, untuk membuat elemen <div> baru:

let newDiv = document.createElement('div');
newDiv.innerText = 'Ini adalah elemen baru';Code language: JavaScript (javascript)

Setelah elemen dibuat, Anda dapat mengatur atribut dan gaya elemen tersebut seperti elemen lainnya.

Menambahkan Elemen ke dalam DOM

Setelah elemen baru dibuat, Anda perlu menambahkannya ke dalam DOM agar terlihat oleh pengguna. Ada beberapa metode untuk melakukan ini, antara lain appendChild() dan insertBefore().

  • appendChild(): Metode ini menambahkan elemen baru sebagai anak terakhir dari elemen induk yang ditentukan.
  let parentElement = document.getElementById('parent');
  parentElement.appendChild(newDiv);Code language: JavaScript (javascript)

Dalam contoh ini, newDiv ditambahkan sebagai anak terakhir dari elemen dengan id parent.

  • insertBefore(): Metode ini menambahkan elemen baru sebelum elemen tertentu yang sudah ada sebagai anak dari elemen induk.
  let referenceElement = document.getElementById('reference');
  parentElement.insertBefore(newDiv, referenceElement);Code language: JavaScript (javascript)

Dalam contoh ini, newDiv ditambahkan sebelum elemen dengan id reference di dalam parentElement.

Menghapus Elemen dari DOM

Menghapus elemen yang tidak lagi dibutuhkan dari DOM adalah tugas penting untuk menjaga dokumen tetap rapi dan menghindari penumpukan elemen yang tidak digunakan. Ada dua metode utama untuk menghapus elemen: removeChild() dan remove().

  • removeChild(): Metode ini menghapus elemen anak dari elemen induknya.
  let childElement = document.getElementById('child');
  parentElement.removeChild(childElement);Code language: JavaScript (javascript)

Dalam contoh ini, elemen dengan id child dihapus dari elemen induk parentElement.

  • remove(): Metode ini menghapus elemen itu sendiri langsung dari DOM. Ini lebih singkat dan tidak memerlukan referensi ke elemen induk.
  childElement.remove();Code language: CSS (css)

Metode ini bekerja pada elemen yang ingin dihapus, menjadikannya lebih sederhana saat Anda tidak perlu mengakses elemen induk.

Dengan menguasai metode-metode ini, Anda dapat menambah dan menghapus elemen dari DOM secara dinamis. Hal ini memungkinkan pembuatan antarmuka pengguna yang lebih interaktif dan responsif, di mana elemen dapat ditambahkan atau dihapus berdasarkan interaksi pengguna atau perubahan kondisi aplikasi. Misalnya, Anda bisa menambah elemen formulir baru berdasarkan masukan pengguna atau menghapus elemen yang sudah tidak relevan, memberikan pengalaman yang lebih lancar dan intuitif.

7. Event Handling dalam DOM

Event handling adalah bagian penting dari pengembangan web yang memungkinkan interaksi antara pengguna dan halaman web. Dalam DOM, event adalah tindakan yang terjadi pada elemen, seperti klik mouse, pengiriman formulir, atau perubahan nilai input. Event listener adalah fungsi JavaScript yang dipanggil ketika suatu event terjadi pada elemen tertentu.

Memahami Event dan Event Listener

Event adalah tindakan yang terjadi pada elemen, seperti klik mouse atau pengiriman formulir. Event listener adalah fungsi JavaScript yang dipanggil saat suatu event terjadi. Misalnya, Anda bisa menetapkan event listener untuk elemen tombol yang dipanggil setiap kali tombol itu diklik.

Menambahkan Event Listener ke Elemen

Untuk menangani event dalam DOM, Anda dapat menggunakan addEventListener() atau inline event handling seperti onClick, onChange, dan sejenisnya.

  • addEventListener(): Metode ini memungkinkan Anda menambahkan event listener ke elemen dan menentukan fungsi yang akan dipanggil ketika event terjadi. Misalnya, untuk menangani klik tombol:
  let button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    alert('Tombol diklik!');
  });Code language: JavaScript (javascript)
  • Inline Event Handling: Anda juga dapat menambahkan event handler secara langsung dalam elemen HTML, seperti onclick, onchange, dan sebagainya. Contoh:
  <button onclick="alert('Tombol diklik!')">Klik saya</button>Code language: HTML, XML (xml)

Namun, pendekatan ini kurang disarankan karena mempercampurkan tata letak HTML dengan logika JavaScript.

Contoh Event Handling Dasar

Mari kita lihat contoh penggunaan event handling dalam DOM:

  1. Klik tombol untuk mengubah teks:
   <button id="myButton">Klik saya</button>
   <script>
     let button = document.getElementById('myButton');
     button.addEventListener('click', function() {
       button.innerText = 'Tombol telah diklik';
     });
   </script>Code language: HTML, XML (xml)

Ketika tombol diklik, teksnya akan berubah menjadi “Tombol telah diklik”.

  1. Input event untuk memodifikasi konten:
   <input type="text" id="myInput">
   <div id="output"></div>
   <script>
     let input = document.getElementById('myInput');
     let output = document.getElementById('output');
     input.addEventListener('input', function() {
       output.innerText = 'Nilai input: ' + input.value;
     });
   </script>Code language: HTML, XML (xml)

Ketika pengguna mengetik di input, nilai input akan ditampilkan di elemen output.

Dengan memahami konsep event dan event listener, Anda dapat membuat halaman web yang lebih interaktif dan responsif. Event handling memungkinkan Anda merespons aksi pengguna secara dinamis, memberikan pengalaman yang lebih baik dan intuitif bagi pengguna Anda.

8. Contoh Kasus: Membuat Aplikasi Todo List Sederhana

Dalam contoh kasus ini, kita akan membuat aplikasi todo list sederhana menggunakan HTML, CSS, dan JavaScript. Aplikasi ini akan memungkinkan pengguna untuk menambahkan, menandai sebagai selesai, dan menghapus tugas. Selain itu, kita akan menggunakan localStorage untuk menyimpan tugas agar tetap ada setelah halaman direfresh.

Struktur HTML Dasar untuk Aplikasi Todo List

Berikut adalah struktur dasar HTML untuk aplikasi todo list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo List App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Todo List</h1>
    <input type="text" id="taskInput" placeholder="Tambahkan tugas...">
    <button id="addTaskBtn">Tambah</button>
    <ul id="taskList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>Code language: HTML, XML (xml)

Menggunakan JavaScript untuk Menambahkan Tugas Baru ke dalam List

Kita akan menambahkan fungsi JavaScript untuk menangani penambahan tugas baru ke dalam list ketika tombol “Tambah” ditekan. Fungsi ini akan membuat elemen <li> baru berdasarkan input pengguna dan menambahkannya ke dalam list.

const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

addTaskBtn.addEventListener('click', function() {
  const taskText = taskInput.value.trim();
  if (taskText !== '') {
    const newTask = document.createElement('li');
    newTask.innerText = taskText;
    taskList.appendChild(newTask);
    taskInput.value = '';
    saveTasksToLocalStorage();
  }
});Code language: JavaScript (javascript)

Menggunakan JavaScript untuk Menandai Tugas sebagai Selesai dan Menghapus Tugas

Kita juga akan menambahkan fungsi JavaScript untuk menandai tugas sebagai selesai dan menghapus tugas dari list. Ketika pengguna mengklik pada tugas, tugas tersebut akan ditandai sebagai selesai, dan ketika pengguna mengklik ikon hapus, tugas tersebut akan dihapus dari list.

taskList.addEventListener('click', function(event) {
  const clickedElement = event.target;
  if (clickedElement.tagName === 'LI') {
    clickedElement.classList.toggle('completed');
    saveTasksToLocalStorage();
  } else if (clickedElement.classList.contains('delete')) {
    clickedElement.parentElement.remove();
    saveTasksToLocalStorage();
  }
});Code language: JavaScript (javascript)

Menggunakan localStorage untuk Menyimpan Tugas

Terakhir, kita akan menggunakan localStorage untuk menyimpan tugas agar tetap ada setelah halaman direfresh. Kita akan menyimpan tugas sebagai array JSON di localStorage.

function saveTasksToLocalStorage() {
  const tasks = [];
  taskList.querySelectorAll('li').forEach(task => {
    tasks.push({
      text: task.innerText,
      completed: task.classList.contains('completed')
    });
  });
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasksFromLocalStorage() {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.forEach(task => {
    const newTask = document.createElement('li');
    newTask.innerText = task.text;
    if (task.completed) {
      newTask.classList.add('completed');
    }
    taskList.appendChild(newTask);
  });
}

document.addEventListener('DOMContentLoaded', function() {
  loadTasksFromLocalStorage();
});Code language: JavaScript (javascript)

Dengan langkah-langkah di atas, kita telah berhasil membuat aplikasi todo list sederhana yang dapat menambah, menandai sebagai selesai, dan menghapus tugas, serta menyimpan tugas menggunakan localStorage. Aplikasi ini dapat dikembangkan lebih lanjut dengan menambahkan fitur-fitur tambahan seperti pengeditan tugas atau kategori tugas.

9. Tips dan Trik dalam Manipulasi DOM

Manipulasi DOM adalah bagian penting dari pengembangan web, tetapi dapat menjadi rumit dan memakan waktu jika tidak dilakukan dengan benar. Berikut adalah beberapa tips dan trik untuk membantu Anda mengoptimalkan, menyederhanakan, dan mendepan proses manipulasi DOM.

Mengoptimalkan Kinerja DOM Manipulation

Manipulasi DOM dapat menjadi mahal secara komputasi, terutama ketika dilakukan pada elemen-elemen yang banyak atau dalam loop yang besar. Untuk mengoptimalkan kinerja, pertimbangkan beberapa hal berikut:

  • Batch DOM Updates: Hindari melakukan banyak perubahan kecil pada DOM secara terpisah. Alih-alih, lakukan semua perubahan sekaligus untuk mengurangi overhead.
  • Gunakan DocumentFragment: Saat menambahkan banyak elemen baru ke dalam DOM, pertimbangkan untuk menggunakan DocumentFragment untuk membuat dan menyisipkan elemen dalam satu langkah, mengurangi jumlah operasi DOM.
  • Pertimbangkan Virtual DOM: Saat bekerja dengan aplikasi yang sangat dinamis, pertimbangkan menggunakan konsep Virtual DOM seperti yang digunakan oleh library seperti React atau Vue.js. Ini dapat mengurangi jumlah manipulasi langsung pada DOM, meningkatkan kinerja dan pengalaman pengguna.

Menghindari Pengulangan Kode dengan Fungsi Utilitas

Pengulangan kode adalah musuh dalam pengembangan perangkat lunak. Untuk menghindarinya dalam manipulasi DOM, pertimbangkan untuk membuat fungsi utilitas yang dapat digunakan kembali untuk tugas-tugas umum, seperti membuat elemen baru atau menambahkan kelas ke elemen.

Contoh fungsi utilitas untuk membuat elemen baru:

function createNewElement(tagName, textContent, classNames) {
  const element = document.createElement(tagName);
  element.textContent = textContent;
  if (classNames) {
    classNames.forEach(className => element.classList.add(className));
  }
  return element;
}Code language: JavaScript (javascript)

Dengan menggunakan fungsi utilitas seperti ini, Anda dapat membuat elemen baru dengan lebih mudah dan menghindari pengulangan kode yang tidak perlu.

Teknik Debugging untuk DOM Manipulation

Saat mengembangkan aplikasi web, debugging adalah proses penting untuk menemukan dan memperbaiki kesalahan dalam manipulasi DOM. Beberapa teknik debugging yang berguna meliputi:

  • Konsol Log: Gunakan console.log() untuk mencetak nilai variabel, status, atau pesan debug ke konsol browser. Ini membantu Anda memahami aliran logika dan nilai variabel pada saat eksekusi.
  • Elemen Inspeksi: Gunakan fitur inspeksi elemen browser untuk melihat struktur DOM dan properti elemen secara real-time. Ini memungkinkan Anda untuk memverifikasi apakah manipulasi DOM berjalan seperti yang diharapkan.
  • Breakpoints: Gunakan breakpoint dalam debugger browser untuk menghentikan eksekusi kode pada titik tertentu dan memeriksa nilai variabel atau status aplikasi pada saat itu. Ini sangat berguna untuk menelusuri alur eksekusi kode.

Dengan menggunakan teknik-teknik ini, Anda dapat mengatasi kesalahan dalam manipulasi DOM dengan cepat dan efisien, meningkatkan kualitas dan stabilitas aplikasi web Anda.

Categories: Javascript
Tags:

0 Comments

Leave a Reply

Avatar placeholder

Related Posts

Membangun Aplikasi Portofolio Pribadi dengan React dan Contentful
Javascript

Membangun Aplikasi Portofolio Pribadi dengan React dan Contentful

I. Pendahuluan Dalam era digital saat ini, memiliki portofolio online yang menarik dan fungsional adalah suatu keharusan bagi profesional di berbagai bidang, terutama bagi mereka yang bekerja di industri kreatif dan teknologi. Portofolio online tidak Read more…

Panduan Praktis Pengujian Unit dalam Aplikasi React dengan Jest dan Enzyme
Javascript

Panduan Praktis Pengujian Unit dalam Aplikasi React dengan Jest dan Enzyme

I. Pendahuluan Pendahuluan ini memberikan pemahaman awal tentang pengujian unit dalam pengembangan aplikasi React, menguraikan mengapa pengujian unit penting, dan memberikan gambaran tentang alat yang akan digunakan, yaitu Jest dan Enzyme. A. Pengenalan Pengujian Unit Read more…

Memahami Jenis Data dalam TypeScript String, Number, Boolean, dan Lainnya
Javascript

Memahami Jenis Data dalam TypeScript: String, Number, Boolean, dan Lainnya

I. Pendahuluan Dalam pengembangan perangkat lunak, pemahaman tentang jenis data adalah landasan yang vital. Hal ini sama pentingnya dalam bahasa pemrograman TypeScript. Sebelum kita dapat membuat kode yang efektif dan efisien, kita harus memiliki pemahaman Read more…