Javascript DOM (Document Object Model) adalah antarmuka yang memungkinkan pengembang memanipulasi konten, struktur, dan gaya situs web. Jika Anda ingin mempelajari lebih lanjut tentang DOM dan cara memanipulasinya menggunakan Javascript, berikut adalah referensi dasar menurut Gabriel Tanner

Definisi DOM

Pada tingkat paling dasar, sebuah situs web terdiri dari dokumen HTML dan CSS. Browser membuat representasi dokumen yang dikenal sebagai Document Object Model (DOM). Dokumen ini mengizinkan Javascript untuk mengakses dan memanipulasi elemen dan gaya situs web. Model ini dibangun dalam struktur objek dan mendefinisikan

• elemen HTML sebagai objek
• Properti dan acara elemen HTML
• Metode untuk mengakses elemen HTML

Gambar oleh Gabriel Tanner di Medium

Elemen-elemen di atas disebut node. Tidak hanya elemen yang mendapatkan node tetapi atribut elemen dan teks juga mendapatkan nodenya masing-masing, yaitu atribut-node dan text-node

Dokumen DOM

Document DOM adalah seluruh objek yang ada di website Anda. Jika Anda ingin mengakses objek apa pun di halaman web Anda, Anda harus selalu memulai dengan dokumen. Karena ada banyak properti dan metode penting yang dapat Anda gunakan untuk mengakses dan memodifikasi situs web Anda

Cara Mendapatkan Elemen HTML

Mendapat elemen dengan ID

Metode getElementById() digunakan untuk mendapatkan satu elemen dengan idnya. Mari kita lihat sebuah contoh

var title = document.getElementById(‘header-title’);

Di sini kita mendapatkan elemen dengan id header-title dan menyimpannya ke dalam sebuah variabel

Mendapat elemen dengan nama kelas

Kita juga bisa mendapatkan lebih dari satu objek dengan menggunakan metode getElementsByClassName()

var items = document.getElementsByClassName(‘list-items’);

_

Di sini kita mendapatkan semua item dengan kelas list-items dan menyimpannya dalam sebuah variabel

Mendapat elemen dengan nama tag

Kita juga bisa mendapatkan elemen kita dengan nama tag menggunakan metode getElementsByTagName()

var listItems = document.getElementsByTagName(‘li’);

Di sini kita mendapatkan semua elemen li dari dokumen HTML kita dan menyimpannya ke dalam sebuah variabel

pemilih kueri

Metode querySelector() mengembalikan elemen pertama yang cocok dengan pemilih CSS yang ditentukan. Itu berarti Anda bisa mendapatkan elemen dengan id, kelas, tag, dan semua pemilih CSS yang valid. Berikut adalah daftar dari beberapa pilihan yang paling populer

Dapatkan dengan id

var header = document.querySelector(‘#header’)

Dapatkan berdasarkan kelas

var items = document.querySelector(‘.list-items’)

_

Dapatkan dengan tag

var headings = document.querySelector(‘h1’);

Dapatkan elemen yang lebih spesifik

Kita juga bisa mendapatkan elemen yang lebih spesifik menggunakan CSS Selector

document.querySelector(“h1.heading”);

_

Dalam contoh ini kami mencari tag dan kelas bersama-sama dan mengembalikan elemen pertama yang melewati Pemilih CSS

Queryselectorall

Metode querySelectorAll() persis sama dengan metode querySelector() kecuali metode ini mengembalikan semua elemen yang cocok dengan CSS Selector

var heading = document.querySelectorAll(‘h1.heading’);

Dalam contoh ini, kita mendapatkan semua tag h1 yang memiliki kelas heading dan menyimpannya dalam sebuah array

Memodifikasi Elemen HTML

HTML DOM memungkinkan kita mengubah konten dan gaya elemen HTML dengan mengubah propertinya

Ubah HTML

Properti innerHTML dapat digunakan untuk mengubah konten elemen HTML

document.getElementById(“#header”).innerHTML = “Hello World!”;

_

Dalam contoh ini kita mendapatkan elemen dengan header id dan menyetel konten bagian dalam menjadi “Hello World. ”

InnerHTML juga dapat digunakan untuk menempatkan tag di dalam tag lain

document.getElementsByTagName("div").innerHTML = "
Hello World!
"

_

Di sini kami meletakkan tag h1 ke semua div yang ada

Ubah nilai atribut

Anda juga dapat mengubah nilai atribut menggunakan DOM

var items = document.getElementsByClassName(‘list-items’);

_0

Dalam contoh ini kita mengubah src dari semua tag menjadi test.jpg.

Ubah gaya

Untuk mengubah gaya elemen HTML, kita perlu mengubah properti gaya elemen kita. Berikut adalah contoh sintaks untuk mengubah gaya

var items = document.getElementsByClassName(‘list-items’);

_1

Sekarang mari kita lihat contoh di mana kita mendapatkan elemen dan mengubah batas bawah menjadi garis hitam pekat

var items = document.getElementsByClassName(‘list-items’);

_2

Properti CSS harus ditulis dalam huruf unta, bukan nama properti css biasa. Dalam contoh ini kami menggunakan borderBottom

Menambah dan menghapus elemen

Sekarang kita akan melihat bagaimana kita dapat menambahkan elemen baru dan menghapus elemen yang sudah ada

Menambahkan elemen

Berikut adalah contoh sintaks untuk menambahkan elemen

var items = document.getElementsByClassName(‘list-items’);

_3

Di sini kita hanya membuat elemen div menggunakan metode createElement() yang mengambil tagname sebagai parameter dan menyimpannya dalam sebuah variabel. Setelah itu kita hanya perlu menyediakan beberapa konten lalu memasukkannya ke dalam dokumen DOM kita

var items = document.getElementsByClassName(‘list-items’);

_4

Di sini kita membuat konten menggunakan metode createTextNode() yang menggunakan String sebagai parameter dan kemudian kita menyisipkan elemen div baru sebelum div yang ada di dokumen kita

Hapus sebuah elemen

Berikut adalah contoh sintaks untuk menghapus elemen

var items = document.getElementsByClassName(‘list-items’);

_5

Di sini kita mendapatkan elemen dan menghapusnya menggunakan metode removeChild()

Ganti elemen

Berikut adalah contoh sintaks untuk mengganti elemen

var items = document.getElementsByClassName(‘list-items’);

_6

Di sini kita dapat mengganti elemen menggunakan metode replaceChild(). Argumen pertama adalah elemen baru dan argumen kedua adalah elemen yang ingin kita ganti

Menulis langsung ke aliran keluaran HTML

Kita juga dapat menulis ekspresi HTML dan JavaScript langsung ke aliran keluaran HTML menggunakan metode write()

var items = document.getElementsByClassName(‘list-items’);

_7

Kami juga dapat mengirimkan ekspresi JavaScript seperti objek tanggal

var items = document.getElementsByClassName(‘list-items’);

_8

Metode write() juga dapat mengambil beberapa argumen yang akan ditambahkan ke dokumen saat muncul

Penangan Acara

DOM HTML juga memungkinkan Javascript untuk bereaksi terhadap peristiwa HTML. Berikut adalah daftar dari beberapa yang paling penting

• klik mouse
• pemuatan halaman
• gerakan tikus
• perubahan kolom input

Tetapkan Acara

Anda dapat menentukan peristiwa secara langsung dalam kode HTML Anda dengan menggunakan atribut pada tag Anda. Berikut adalah contoh acara onclick

var items = document.getElementsByClassName(‘list-items’);

_9

Dalam contoh ini, teks

akan berubah menjadi “Halo!” Saat Anda mengklik tombol.

Anda juga dapat memanggil fungsi saat suatu peristiwa dipicu seperti yang Anda lihat pada contoh berikut

var listItems = document.getElementsByTagName(‘li’);

0

Di sini kita memanggil metode changeText() saat tombol diklik dan meneruskan elemen sebagai atribut

Kami juga dapat mengatur acara yang sama dalam kode Javascript kami

var listItems = document.getElementsByTagName(‘li’);

1

Tetapkan Pendengar Acara

Berikut ini adalah contoh sintaks untuk menentukan event listener ke elemen HTML

var listItems = document.getElementsByTagName(‘li’);

2

Di sini kita hanya mengatur clickevent yang memanggil metode runEvent saat elemen 'btn' Anda diklik

Anda juga dapat menetapkan beberapa acara ke satu elemen

var listItems = document.getElementsByTagName(‘li’);

_3

Hubungan Node

Node dalam Document DOM memiliki hubungan hierarkis satu sama lain, terstruktur seperti pohon. Di sini kita menggunakan istilah parent, sibling, dan child untuk menggambarkan hubungan antar node

Node paling atas disebut root dan merupakan satu-satunya node yang tidak memiliki parent. Root dalam dokumen HTML normal adalah tag karena tidak memiliki parent dan merupakan tag teratas di dokumen.

Menavigasi Antar Node

Kita dapat menavigasi antar node menggunakan properti berikut

• parentNode
• childNodes
• anak pertama
• anak terakhir
• saudara berikutnya

Berikut adalah contoh bagaimana Anda bisa mendapatkan elemen induk dari h1

var listItems = document.getElementsByTagName(‘li’);

_4

Nah, bagaimana pengenalan JavaScript DOM kali ini?

Jika Anda tertarik untuk belajar tentang pemrograman website atau ingin menjadi web developer, Anda bisa mendaftarkan diri di tempat magang atau kerja Techarea