Jika Anda baru mulai mempelajari JavaScript, Anda mungkin pernah mendengar tentang DOM.ย Tapi apa sebenarnya itu?
Pada artikel ini, saya akan menjelaskan apa itu DOM dan memberikan beberapa contoh kode JavaScript.
Kita akan melihat cara memilih elemen dari dokumen HTML, cara membuat elemen, cara mengubah gaya CSS sebaris, dan cara mendengarkan acara.
Apa itu DOM?
DOM adalah singkatan dari Document Object Model.ย Ini adalah antarmuka pemrograman yang memungkinkan kita membuat, mengubah, atau menghapus elemen dari dokumen.ย Kami juga dapat menambahkan acara ke elemen ini untuk membuat halaman kami lebih dinamis.
DOM melihat dokumen HTML sebagai pohon node.ย Node mewakili elemen HTML.
Mari kita lihat kode HTML ini untuk lebih memahami struktur pohon DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM tree structure</title>
</head>
<body>
<h1>DOM tree structure</h1>
<h2>Learn about the DOM</h2>
</body>
</html>Dokumen kita disebut simpul akar dan berisi satu simpul anak yang merupakanย <html>elemennya.ย Elemenย <html>berisi dua anak yaitu elemenย <head>danย <body>.
Baik elemenย <head>danย <body>memiliki anak mereka sendiri.
Berikut adalah cara lain untuk memvisualisasikan pohon simpul ini.
Kita dapat mengakses elemen-elemen ini dalam dokumen dan mengubahnya menggunakan JavaScript.
Mari kita lihat beberapa contoh bagaimana kita bisa bekerja dengan DOM menggunakan JavaScript.
Cara Memilih Elemen di Dokumen
Ada beberapa metode berbeda untuk memilih elemen dalam dokumen HTML.
Pada artikel ini, kami akan fokus pada tiga metode tersebut:
getElementById()querySelector()querySelectorAll()
getElementById()
Dalam HTML,ย ids digunakan sebagai pengidentifikasi unik untuk elemen HTML.ย Ini berarti Anda tidak dapat memilikiย idnama yang sama untuk dua elemen yang berbeda.
Ini salah:
<p id="para">This is my first paragraph.</p>
<p id="para">This is my second paragraph.</p>Anda harus memastikan ituย idunik seperti ini:
<p id="para1">This is my first paragraph.</p>
<p id="para2">This is my second paragraph.</p>Dalam JavaScript, kita dapat mengambil tag HTML dengan mereferensikanย idnamanya.
document.getElementById("id name goes here")Kode ini memberi tahu komputer untuk mendapatkanย <p>elemen denganย idofย para1dan mencetak elemen ke konsol.
const paragraph1 = document.getElementById("para1");
console.log(paragraph1);
Jika kita hanya ingin membaca isi paragraf, maka kita dapat menggunakanย textContentproperti di dalamย console.log().
const paragraph1 = document.getElementById("para1");
console.log(paragraph1.textContent);
querySelector()
Anda dapat menggunakan metode ini untuk menemukan elemen dengan satu atau lebih pemilih CSS.
Saya telah membuat contoh HTML acara TV favorit saya ini:
<h1>Favorite TV shows</h1>
<ul class="list">
<li>Golden Girls</li>
<li>Archer</li>
<li>Rick and Morty</li>
<li>The Crown</li>
</ul>Jika saya ingin menemukan dan mencetak ke konsolย h1elemen, maka saya dapat menggunakan nama tag tersebut di dalam fileย querySelector().
const h1Element = document.querySelector("h1");
console.log(h1Element);
Jika saya ingin menargetkanย class="list"untuk mencetak daftar unordered ke konsol, maka saya akan menggunakanย .listdi dalam ย ย querySelector().
Kataย .sebelumnyaย listmemberi tahu komputer untuk menargetkan nama kelas.ย Jika Anda ingin menargetkanย idmaka Anda akan menggunakanย #simbol sebelum nama.
const list = document.querySelector(".list");
console.log(list);
querySelectorAll()
Metode ini menemukan semua elemen yang cocok dengan pemilih CSS dan mengembalikan daftar semua node tersebut.
Jika saya ingin menemukan semuaย <li>item dalam contoh kita, saya dapat menggunakanย >penggabung anak untuk menemukan semua anak dariย <ul>.
const listItems = document.querySelectorAll("ul > li");
console.log(listItems); 
Jika kita ingin mencetakย <li>item aktual dengan acara tv, kita dapat menggunakan aย forEach()untuk mengulang NodeList dan mencetak setiap item.
const listItems = document.querySelectorAll("ul > li");
listItems.forEach((item) => {
console.log(item);
});
Cara Menambahkan Elemen Baru ke Dokumen
Kita dapat menggunakanย document.createElement()untuk menambahkan elemen baru ke pohon DOM.
Mari kita lihat contoh ini:
<h1>Reasons why I love freeCodeCamp:</h1>Saat ini, saya hanya memilikiย <h1>tag di halaman.ย Namun saya ingin menambahkan daftar alasan mengapa saya menyukai freeCodeCamp di bawahย <h1>tag tersebut menggunakan JavaScript.
Pertama-tama kita dapat membuatย <ul>elemen menggunakanย document.createElement().ย Saya akan menetapkan itu ke variabel bernamaย unorderedList.
let unorderedList = document.createElement("ul");
Kemudian kita perlu menambahkanย <ul>elemen itu ke dokumen menggunakanย appendChild()metode tersebut.
document.body.appendChild(unorderedList);Bagian selanjutnya adalah menambahkan beberapaย <li>elemen di dalamย <ul>elemen menggunakanย createElement()metode.
let listItem1 = document.createElement("li");
let listItem2 = document.createElement("li");Kemudian kita dapat menggunakan ย ย textContentproperti untuk menambahkan teks untuk item daftar kita.
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
Bagian terakhir adalah menggunakanย appendChild()metode sehingga daftar item dapat ditambahkan ke daftar unordered.
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);
let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);Seperti inilah tampilan kode secara keseluruhan.
let unorderedList = document.createElement("ul");
document.body.appendChild(unorderedList);
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);
let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);Seperti inilah tampilan output di halaman:
Cara Menggunakan Properti Gaya untuk Mengubah Gaya CSS Sebaris
Propertiย stylememberi Anda kemampuan untuk mengubah CSS di dokumen HTML Anda.
Dalam contoh ini, kita akan mengubahย h1teks dari hitam menjadi biru menggunakanย styleproperti.
Inilah HTML kami.
<h1>I was changed to blue using JavaScript</h1>
Pertama-tama kita perlu mengambilย h1tag menggunakanย querySelector()metode ini.
const h1 = document.querySelector("h1");Kami kemudian gunakanย h1.style.coloruntuk mengubahย h1teks dari hitam menjadi biru.
const h1 = document.querySelector("h1");
h1.style.color = "blue";Seperti ini hasilnya di browser:
Anda dapat menggunakanย styleproperti ini untuk mengubah sejumlah gaya inline CSS termasukย background-color,ย border-style,ย font-sizedan lainnya.
Cara Menggunakan addEventListener() untuk Memproses Acara di Halaman
Metode ini memungkinkan Anda melampirkan acara ke elemen HTML seperti tombol.
Dalam contoh ini, ketika pengguna mengklik tombol, pesan peringatan akan muncul.
Dalam HTML kami, kami memiliki elemen tombol denganย id =btn.
<button id="btn">Show alert</button>
Kami dapat menargetkan elemen itu dalam JavaScript kami menggunakanย getElementById()metode dan menugaskannya ke variabel yang disebutย button.
const button = document.getElementById("btn");
addEventListener()Mengambil jenis acara dan fungsiย .ย Jenis acara akan menjadiย clickacara dan fungsinya akan memicu pesan peringatan.
Ini adalah kode untuk menambahkan pendengar acara keย buttonvariabel.
button.addEventListener("click", () => {
alert("Thank you for clicking me");
});Ini adalah kode lengkap di mana Anda dapat mengklik tombol dan pesan peringatan akan muncul:
See the Pen DOM by Gioidstar (@gioidstar) on CodePen.
sumber : www.freecodecamp.org
