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.
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.
Untuk menggunakan dom pada javascript kita bisa menggunakan syntax
Syntax ini berisi representasi dokumen html yang belum di modifikasi oleh javascript.document
Dom juga menyediakan banyak sekali fungsi yang bisa kita gunakan untuk berbagai keperluan.
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 headdocument.body
, digunakan untuk mengakses elemen tag bodydocument.title
, digunakan untuk mengakses title halaman
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 atasdocumnet.getElementsByName
, digunakan untuk mengakses elemen berdasarkan atribut name. Hasilnya berupa array elemen, sehingga untuk mengaksesnya elemennya diperlukan indexdocument.getElementsByTagName
, digunakan untuk mengakses elemen berdasarkan nama tag. Hasilnya berupa array elemen dan diperlukan index untuk mengaksesnyadocument.getElementsByClassName
, digunakan untuk mengakses elemen berdasarkan atribut class. Hasilnya berupa array dan diperlukan index untuk mengaksesnya
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>
HasilnyaPada
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>
HasilnyaMengambil url dan domain
Dom juga menyediakan fungsi untuk mengetahui url dan domain dari halaman tersebut.
document.url
, digunakan untuk mengambil url dari halaman yang ditampilkandocument.location
, digunakan untuk mengambil lokasi secara spesifik dari halaman yang ditampilkandocument.domain
, digunakan untuk mengambil nama domain dari halaman yang ditampilkan
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 barisdocument.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>
HasilnyaMembuat 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>
HasilnyaMemodifikasi 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>
HasilnyaMemodifikasi 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
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>
HasilnyaMengambil 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 atributsetAttribute
, 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>
HasilnyaMembuat 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>
HasilnyaMengambil 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,+
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!.
0 Komentar untuk " Tutorial Lengkap Belajar Javascript # Apa itu dom pada javascript"
Silahkan berkomentar dengan baik dan bijak!