DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

» » » » Tutorial Lengkap Belajar Javascript # Apa itu dom pada javascript

Tutorial Lengkap Belajar Javascript # Apa itu dom pada javascript

deretcode   , , ,
advertisement
Apa itu dom pada javascript

Ketika kita mulai belajar pemrograman javascript untuk mengembangkan web yang interaktif hal pertama yang perlu kita pelajari adalah memahami apa itu DOM.
Mempelajari DOM sangatlah penting karena tanpa DOM, javascript tidak akan bisa memanipulasi elemen html.
Oleh karena itu, pada tutorial kali ini kita akan belajar tentang DOM itu sendiri
Yuk kita mulai tutorialnya

Apa itu dom?

DOM atau Document Object Model adalah sebuah pemodelan dari dokumen html kedalam bentuk object yang dapat di manipulasi oleh javascript.
Dom menjadi jembatan penghubung antara javascript dengan html.
Ketika kita ingin memanipulasi sebuah elemen, seperti mengubah konten, mengubah struktur, mengubah style dan lain sebagainya, maka kita hanya perlu memanfaatkan fungsi-fungsi yang sudah disediakan DOM dalam membuat kode javascriptnya.

Apa itu dom pada javascript

Dom bisa dikatakan sebagai API (Application Programming Interface) karena memiliki fungsi sebagai perantara antara bahasa pemrogramman javascript dengan bahasa pemrograman html.
Pada dasarnya, yang di tampilkan web browser bukanlah dokumen html sebenarnya, melainkan dom itu sendiri, sehingga ketika kita kita malakukan perubahan style pada elemen menggunakan javascript, yang terjadi adalah perubahan pada dom bukan html aslinya.

Cara menggunakan dom

Agar lebih mudah dalam menggunakan dom, kita bisa memanfaatkan fitur dari web browser yaitu inspection code.
Disini saya menggunakan google chrome dan cara untuk membuka inpect tool nya, dengan klik kanan dan klik inspect dan kemudian pilih tab console.
Apa itu dom pada javascript
Untuk menggunakan dom pada javascript kita bisa menggunakan syntax document
Syntax ini berisi representasi dokumen html yang belum di modifikasi oleh javascript.
Apa itu dom pada javascript
Dom juga menyediakan banyak sekali fungsi yang bisa kita gunakan untuk berbagai keperluan.
Apa itu dom pada javascript
Berikut beberapa fungsi-fungsi dari DOM javascript yang akan sering kita gunakan

Mengakses elemen

Dom menyediakan fungsi yang bisa kita gunakan untuk mengakses elemen tertentu pada html, yaitu
  • document.head, digunakan untuk mengakses elemen tag head
  • document.body, digunakan untuk mengakses elemen tag body
  • document.title, digunakan untuk mengakses title halaman
Apa itu dom pada javascript

Jika kita ingin mengakses elemen selain dari pada elemen di atas, kita bisa menggunakan fungsi berikut
  • document.getElementById, digunakan untuk mengakses elemen berdasarkan atribut id. Hasilnya berupa elemen yang diakses. Jika ada lebih dari satu elemen dengan id yang sama, maka yang digunakan hanya satu elemen paling atas
  • documnet.getElementsByName, digunakan untuk mengakses elemen berdasarkan atribut name. Hasilnya berupa array elemen, sehingga untuk mengaksesnya elemennya diperlukan index
  • document.getElementsByTagName, digunakan untuk mengakses elemen berdasarkan nama tag. Hasilnya berupa array elemen dan diperlukan index untuk mengaksesnya
  • document.getElementsByClassName, digunakan untuk mengakses elemen berdasarkan atribut class. Hasilnya berupa array dan diperlukan index untuk mengaksesnya
Apa itu dom pada javascript

Kita juga bisa menggunakan fungsi querySelector dan querySelectorAll untuk mengakses elemen berdasarkan cara penulisan selector css.
Misalnya
document.querySelector("#id_elemen");//berdasarkan atribut id, hasilnya berupa elemen yang dipilih, jika ada lebih dari satu elemen, elemen yang paling atas yang akan di gunakan
document.querySelectorAll(".nama_class_elemen");//berdasarkan atribut class, hasilnya berupa array elemen, sehingga diperlukan index untuk mengaksesnya
document.querySelectorAll("nama_tag");//berdasarkan nama tag, hasilnya berupa array elemen, sehingga diperlukan index untuk mengaksesnya
Catatan:
Perlu di ketahui bahwa web browser mengeksekusi dokumen html dan javascript dari baris kode pertama hingga terakhir. Sehingga ketika kita ingin mengakses elemen html, maka kode javascript wajib diletakan dibawah elemen yang ingin diakses atau setalah dokumen ready state.
Contohnya seperti berikut
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
   </head>
   <body>
      <script>console.log(document.getElementById("p1"));</script>
      <p id="p1">Paragraf 1</p>
      <script>console.log(document.getElementById("p1"));</script>
   </body>
</html>
Hasilnya
Apa itu dom pada javascript

Pada document.getElementById yang pertama hasilnya null artinya tidak ada elemen yang ditemukan. Sedangkan pada document.getElementById yang kedua hasilnya elemen ditemukan.

Jika kalian tetap ingin meletakan kode javascript sebelum target elemennya misalnya didalam tag head.
Kalian bisa menggunakan fungsi onreadystatechange dan mengecek apakah statusnya sudah komplit atau belum.
Contoh kodenya seperti berikut,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <script>
         document.onreadystatechange = function (){
         if(document.readyState === "complete"){
         console.log(document.getElementById("p1"));
         }
         }
      </script>
   </head>
   <body>
      <p id="p1">Paragraf 1</p>
   </body>
</html>
Hasilnya
Apa itu dom pada javascript

Mengambil url dan domain

Apa itu dom pada javascript
Dom juga menyediakan fungsi untuk mengetahui url dan domain dari halaman tersebut.
  • document.url, digunakan untuk mengambil url dari halaman yang ditampilkan
  • document.location, digunakan untuk mengambil lokasi secara spesifik dari halaman yang ditampilkan
  • document.domain, digunakan untuk mengambil nama domain dari halaman yang ditampilkan
Apa itu dom pada javascript

Menampilkan teks atau elemen

Untuk manampilkan sesuatu kedokumen html seperti teks atau elemen baru, kita bisa menggunakan fungsi 
  • document.write, digunakan untuk menampilkan sesuatu dalam satu baris
  • document.writeln, digunakan untuk menampilkan sesuatu dan kemudian membuat baris baru
Contohnya
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>DOM API Javascript</title>
   </head>
   <body>
      <h1>Apa Itu Dom?</h1>
      <script>
         document.write("<p>DOM atau Document Object Model adalah sebuah pemodelan dari dokumen html kedalam bentuk object yang dapat di manipulasi oleh javascript.</p>");
      </script>
   </body>
</html>
Hasilnya
Apa itu dom pada javascript

Membuat elemen baru

Jika kita menggunakan documen.write, maka hasilnya akan di tampilkan pada baris dimana document.write ditulis. Jika kita ingin membuat elemen baru kemudian menyisipkannya di baris tertentu kita bisa menggunakan fungsi document.createElement.
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>DOM API Javascript</title>
   </head>
   <body>
      <p>DOM atau Document Object Model adalah sebuah pemodelan dari dokumen html kedalam bentuk object yang dapat di manipulasi oleh javascript.</p>
      <script>
         //membuat element tag h1
         var judul = document.createElement("h1");       
         // mengisi elemen h1 dengan teks
         judul.textContent = "Apa Itu Dom?";
         //Mengakses elemen p
         var elementParagraf =document.getElementsByTagName("p")[0];
         //Menyisipkan elemen h1 yang sudah di buat sebelum elemen p
         elementParagraf.parentNode.insertBefore(judul,elementParagraf)
      </script>
   </body>
</html>
Hasilnya
Apa itu dom pada javascript

Memodifikasi konten elemen

Untuk memodifikasi konten elemen, kita bisa menggunakan fungsi innerHTML atau innerText contohnya seperti berikut
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
   </head>
   <body>
      <p id="p1">Paragraf 1</p>
      <script>
        var p1 = document.getElementById("p1");
	p1.innerHTML = "Memodifikasi konten elemen";
      </script>
   </body>
</html>
Hasilnya
Apa itu dom pada javascript

Memodifikasi elemen

Jika innerHTML dan innerText  digunakan untuk momodifikasi isi dari elemen, sedangkan untuk memodifikasi isi dan tag elemen kita bisa menggunakan outerHTML
Contoh kodenya seperti berikut
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
   </head>
   <body>
      <p id="p1">Paragraf 1</p>
      <script>
        var p1 = document.getElementById("p1");
	p1.outerHTML = "<h1>Memodifikasi  elemen</h1>";
      </script>
   </body>
</html>
Hasilnya
Apa itu dom pada javascript

Menambah dan menghapus css class

Dom menyediakan fungsi dimana kita bisa menambahkan atau menghapus css class pada sebuah elemen.
Contohnya seperti berikut
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>DOM API Javascript</title>
      <style>
	.blue{color:blue}
	.red{color:red}
      </style>
   </head>
   <body>
      <p class="blue">Add and Remove Css Class</p>
      <script>
         var elementParagraf =document.getElementsByTagName("p")[0];
         elementParagraf.classList.remove("blue");
	 elementParagraf.classList.add("red");
      </script>
   </body>
</html>
Hasilnya
Apa itu dom pada javascript

Mengambil dan mengatur isi atribut elemen

Dom juga bisa digunakan untuk mengambil dan mengatur isi atribut tertentu pada sebuah elemen.
Fungsi yang digunakan yaitu
  • getAttribute, digunakan untuk mengambil isi atribut
  • setAttribute, digunakan untuk mengatur isi atribut
Contoh kodenya
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>DOM API Javascript</title>
   </head>
   <body>
      <p title="Modifikasi atribut title paragraf">Modifikasi atribut</p>
      <h1>Modifikasi atribut</h1>
      <script>
      // Mengakses elemen p
         var elementParagraf =document.getElementsByTagName("p")[0];
      // Mengambil isi atribut title dari elemen p
         var titleparagraf = elementParagraf.getAttribute("title");
      // Mengakses elemen h1
         var elementHeading1 =document.getElementsByTagName("h1")[0];
      // Mengatur isi atribut title dari elemen h1
         elementHeading1.setAttribute("title",titleparagraf);
      </script>
   </body>
</html>
Hasilnya
Apa itu dom pada javascript

Membuat event listener pada elemen

Event listener adalah sebuah fungsi yang dilakukan karena sebuah aksi tertentu baik oleh user maupun dari sistem itu sendiri. Misalanya kita ingin menjalankan sesuatu ketika sebuah tombol di klik.
Contoh kodenya seperti berikut
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>DOM API Javascript</title>
   </head>
   <body>
      <button id="tombol">Klik Saya</button>
      <script>
         var tombol =document.getElementById("tombol");
	 tombol.addEventListener("click", fungsiKlik);
	 //Membuat fungsi ketika tombol di klik
         function fungsiKlik() {
	    document.getElementById("tombol").innerHTML = "Tombol di klik";
	 }
      </script>
   </body>
</html>
Hasilnya
Apa itu dom pada javascript

Mengambil value dari teks inputan

Dom juga memiliki fungsi yang bisa kita gunakan untuk mengambil value dari textfield yaitu fungsi value.
Contoh kodenya seperti berikut
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>DOM API Javascript</title>
   </head>
   <body>
      <input type="number" placeholder="angka pertama"/> + <input  type="number" placeholder="angka kedua"/> <button>=</button> <output>0</output>
      <script>
	document.getElementsByTagName("button")[0].addEventListener("click",Jumlahkan)
	function Jumlahkan(){
	var angka1 =document.getElementsByTagName("input")[0].value;
        var angka2 = document.getElementsByTagName("input")[1].value;
	  document.getElementsByTagName("output")[0].innerText = parseInt(angka1) + parseInt(angka2);
	}
      </script>
   </body>
</html>
Hasilnya,
+ 0
Jika temen-temen perhatikan ada fungsi parseInt pada contoh kode diatas. Fungsinya akan kita bahas pada tutorial berikutnya tentang tipe variable.

Itu dia artikel singkat apa itu dom javascript dengan beberapa contoh penggunaan fungsi-fungsi dari dom itu sendiri, semoga kalian semua paham dengan apa yang sudah di jabarkan.
Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share.
Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.
Good luck!.
advertisement
0 Komentar untuk " Tutorial Lengkap Belajar Javascript # Apa itu dom pada javascript"

Silahkan berkomentar dengan baik dan bijak!

Privacy Policy | Disclaimer | Sitemap | TOS
Copyright ©