Jasa Pembuatan Website Termurah! Klik Disini

Banner

IDCloudHost | SSD Cloud Hosting Indonesia
Beranda
Javascript
tutorial

Belajar Mengenai DOM Javascript

DOM merupakan singkatan dari Document Object Model, yaitu model objek dari sebuah dokumen HTML yang dapat dimanfaatkan oleh JavaScript untuk mengolah

Tutorial JavaScript Pemula Part 13 : Belajar Mengenai DOM Javascript

Tutorial JavaScript Pemula Part 13 : Belajar Mengenai DOM Javascript

Tutorial JavaScript Pemula Part 13 : Belajar Mengenai DOM Javascript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan membahas Belajar Mengenai DOM Javascript.

Menurut saya, sangat penting belajar mengenai DOM Javascript karena dengan belajar mengenai DOM ini kamu dapat mengakses dan mengubah semua elemen dokumen HTML.

Langsung saja kita masuk ke dalam pelajaran DOM Javascript saja yuk!

Belajar Mengenai DOM (Document Object Model)  Javascript

Apa Itu DOM (Document Object Model) Javascript?

DOM merupakan singkatan dari Document Object Model, yaitu model objek dari sebuah dokumen HTML yang dapat dimanfaatkan oleh JavaScript untuk mengolah dokumen HTML. Dengan memanfaatkan DOM, JavaScript dapat melakukan berbagai macam tindakan terhadap dokumen HTML.

Apa saja yang bisa dilakukan oleh DOM? Banyak sekali yang bisa dilakukan oleh DOM seperti dibawah ini:

  • DOM JavaScript dapat mengubah semua elemen HTML di halaman
  • DOM JavaScript dapat mengubah semua atribut HTML di halaman
  • DOM JavaScript dapat mengubah semua gaya CSS di halaman
  • DOM JavaScript dapat menghapus elemen dan atribut HTML yang ada
  • DOM JavaScript dapat menambahkan elemen dan atribut HTML baru
  • DOM JavaScript dapat bereaksi terhadap semua peristiwa HTML yang ada di halaman
  • DOM JavaScript dapat membuat acara HTML baru di halaman

Wow, keren gak tuh Javascript? Ya kerenlah tapi ini masih awal-awal loh, mungkin pelajaran DOM ini akan sangat panjang jadi saya persingkat saja pada inti-intinya atau hal yang sering digunakan pada DOM yang saya jelaskan nantinya.

Apa Yang Akan Dipelajari Pada DOM?

Kita akan mempelajari banyak hal disini karena pada DOM ini banyak sekali istilah-istilah ataupun method yang kamu harus tahu dan hal yang akan kita pelajari adalah :

  • Menemukan Elemen HTML
  • Mengubah Elemen HTML
  • Menambah atau Menghapus Elemen HTML
  • Navigasi Elemen HTML
  • Mengubah CSS HTML

Ada banyak sekali ya yang kita harus pelajari, ya iya dong namanya juga proses mau jadi Fullstack Web Developer jadi saya rasa ini sangat penting untuk kamu pelajari.

Skuy Kita Lanjut!

Menemukan Elemen HTML Dengan DOM Javascript

Untuk menemukan elemen pada HTML, sebenarnya ada banyak cara yang dapat dilakukan oleh javascript, disini saya mempersingkatnya saja agar lebih gampang kamu pahami. Cara menemukan DOM Javascript antara lain sebagai berikut:

Property/Method

Penjelasan

document.getElementById(id)

Menemukan elemen HTML dengan id

document.getElementsByClassName(name)

Menemukan beberapa elemen HTML dengan nama class

document.getElementsByTagName(name)

Menemukan beberapa elemen HTML dengan nama tag

document.querySelectorAll(selector)

Menemukan beberapa  elemen HTML dengan selector CSS

Mungkin kamu tidak memperhatikan detail kecil dari Property/Method diatas, salah satu detail kecil yang tidak kamu perhatikan adalah pada getElement, karena untuk getElementById() tidak menggunakan s pada kata element karena atribut id hanya dapat digunakan oleh 1 elemen. Sedangkan yang lainya menggunakan s dan data elemen yang dihasilkan berupa data array. Untuk memilih salah satu elemen yang dihasilkan dapat menggunakan index layaknya menggunakan array.

Contoh Menemukan Elemen HTML Dengan DOM Javascript, perhatikan lah code dibawah ini:



<!DOCTYPE html>
<html>
<head>
      <title>Belajar Javascript</title>
</head>
<body>
      <p id="pesan"></p>
</body>
<script>
       document.getElementById("pesan").innerHTML = "Hello World!";
</script>
</html>

Hasil dari code diatas sangatlah sederhana, nah pada tag <p> itu tidak memiliki isi teks sama sekali cuman ada atribut id=”pesan” saja, jadi jika kamu menjalankan code diatas maka akan tampil teks “HELLO WORLD”, teks “Hello World” itu diisi oleh javascript karena javascript sudah berhasil menemukan atribut id pesan.

Sederhananya jika didalam bahasa Indonesia kesannya akan seperti ini : Hallo javascript, tolong carikan saya emelen HTML dengan atribut id yang isinya adalah pesan, jika kamu berhasil menemukannya maka tampilkan  “Hello World” pada elemen HTML tersebut.

Wadoh saya menjelaskannya sudah macam pak Sandhika Galih saja wkwkwk. Okey lanjut!

Mengubah Elemen HTML Dengan DOM Javascript

Tadikan kita menemukan elemen HTML, nah sekarang jika sudah berhasil kita temukan maka kita harus apakan elemen tersebut? Ya bisa saja kamu ubah elemen tersebut. Jika mengubah Elemen ada beberapa property/method yang harus kamu ketahui seperti berikut:

Property/Method

Penjelasan

element.innerHTML = “isi konten”

Mengubah konten suatu elemen dengan konten yang baru

element.nama_atribut = “nilai atribut”

Mengubah nilai atribut dari sebuah elemen.

element.style.property_css = nilai property

Mengubah style CSS suatu elemen

element.setAttribute(nama_atribut, nilai)

Mengubah nilai atribut


Untuk contoh Mengubah Elemen HTML Dengan DOM sama seperti yang saya contohkan diatas kan tadi tapi itu yang saya gunakan adalah element.innerHTML = “isi konten”.

Jika kamu menggunakan element.nama_atribut = “nilai atribut”, kamu bisa mengantinya atau mengubahnya dengan title, align, src, dan sebagainya.

Jika kamu menggunakan element.style.property_css = nilai property, kamu bisa mengganti dengan nama property css yang ingin diubah, tetapi tidak menggunakan penghubung ”-” melainkan kata kedua diawali huruf besar, jika nama property lebih dari satu kata, misanya: fontFamily, textAlign, marginLeft, dan sebagainya.

Menambah atau Menghapus Elemen HTML  Dengan DOM Javascript

Seperti yang saya jelaskan pada awal-awal materi bahwa DOM Javascript ini banyak sekali yang bisa dilakukan nya seperti mengubah (yang seperti diatas) selain itu kita bisa menambahkan atau menghapus elemen HTML dengen DOM javascript juga loh, nah ada beberapa method yang harus kamu tahu dulu seperti dibawah ini :

Property/Method

Penjelasan

document.createElement(element)

Membuat elemen HTML baru

document.removeChild(element)

Menghapus elemen HTML

document.appendChild(element)

Menambahkan elemen HTML

document.replaceChild(kata baru, kata lama)

Mengubah sebuah kata dalam satu elemen

document.write(text)

Menuliskan teks pada dokumen HTML

 

Untuk contoh penggunaan dari createElement, kira-kira seperti dibawah ini:



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
    <script>
        let div = document.createElement('div');
        div.id = 'content';
        div.innerHTML = '<p>Contoh Penggunaan CreateElement</p>';
        document.body.appendChild(div);
    </script>
</body>
</html>

Nah jadi Javascript akan membuat element baru yaitu <div> didalam <div> ada atribut id yang isinya adalah content setelah itu didalam tag <div> ditambahkan tag baru yaitu tag <p> lalu javascript Menambahkan elemen HTML.

Navigasi Elemen HTML Dengan DOM Javascript

Sebenarnya sebuah dokumen HTML itu tersusun secara herarki. Elemen yang berada di level paling atas disebut root. Setiap elemen pasti mempunyai induk elemen, kecuali root. Beberapa elemen kadang memiliki induk yangsama. Hubungan antara elemen yang memiliki induk sama disebut sibling.

Atau untuk lebih simplenya itu seperti  di bawah ini:

  • <html> adalah root
  • <html> tidak memiliki orang tua
  • <html> adalah induk dari <head> dan <body>
  • <head> adalah anak pertama dari <html>
  • <body> adalah anak terakhir dari <html>

Yang dimaksud dengan navigasi elemen yaitu memilih elemen lain dalam hubunganya dengan hirarki elemen berdasarkan elemen yang telah ditemukan. Beberapa property yang dapat digunakan untuk navigasi elemen yaitu:

Property/Method

Penjelasan

parentNode

Mendapatkan elemen induk

childNodes[urutan]

Mendapatkan elemen yang menginduk. Urutan diisi nomor urut elemen dimulai dari nol.

firstChild

Mendapatkan elemen urutan pertama yang menginduk

lastChild

Mendapatkan elemen urutan terakhir yang menginduk

nextSibling

Mendapatkan elemen setelahnya

previousSibling

Mendapatkan elemen sebelumnya


Mengubah CSS HTML Dengan DOM Javascript

Javascript juga bisa mengubah style CSS HTML kamu loh, ya caranya sama saja seperti menemukan elemen html lalu mengubah style elemen HTML dengan CSS , contoh penggunaannya seperti dibawah:



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
             <p id="pesan">Hallo Sayang</p>
    <script>
        document.getElementById("pesan").style.color = "blue";
    </script>
</body>
</html>

Hasilnya maka text Hello Sayang akan diubah menjadi warna biru oleh javascript.

Okey sekian dulu untuk materi DOM Javascript, next kita akan membahas hal yang lebih menarik lagi pastinya.

Semoga Bermanfaat!

Content Creator, Web Developer

Posting Komentar

© ‧ BelajarwithIB. All rights reserved. Developed by Jago Desain