Mengenal Apa itu DOM API pada Javascript

Admin・ 18 Februari 2022

7 min read ・ 2457 views

Apa itu DOM API pada Javascript masih sering menjadi pertanyaan. DOM adalah singkatan dari Document Object Model, DOM ini merupakan object model standar pada XML serta HTML yang mempunyai dasar platform independent.

Ketika menjalankan suatu halaman web di Browser, file HTML yang ada pada web akan ditampilkan serta ditayangkan di layar perangkat.

Pada objek pada dokumen itu terdapat berbagai fungsi serta data dan atribut yang bisa digunakan saat menjalankan program Javascript. Hal itulah yang disebut dengan API (Application Programming Interface).

Ketika Anda memilih akan mempelajari Javascript, maka Anda diharuskan mengenal apa itu DOM. Karena fungsi terpenting Javascript web adalah menjadikan halaman web jadi dinamis.

Apa itu DOM API pada Javascript yang Penting untuk Diketahui

Apa itu DOM API pada Javascript dan bagaimana cara pembuatannya? Berikut adalah pembahasan nya:

1.      Pengertian DOM pada Javascript

Pada dasarnya, DOM ini tidak Cuma terdapat pada Javascript saja, tetapi juga ada di berbagai jenis bahasa pemrograman lain. Pada tingkatan yang dasar, situs sebuah web terdiri dari dokumen HTML dan juga CSS.

Browser menciptakan representasi dokumen yang umumnya dikenal dengan sebutan DOM (Document Object Model).

Dokumen itu menjadikan Javascript menjadi bisa masuk dan merubah elemen serta style pada situs web. Model tersebut diatur pada struktur ojek dan juga mendefinisikan:

• Event serta properties pada event elemen HTML
• Elemen HTML untuk objek
• Method untuk masuk ke elemen HTML

Objek dokumen adalah model dokumen HTML yang di didalamnya terdapat berbagai fungsi dan atribut berbentuk objek yang didasarkan pada elemen HTML yang bisa digambarkan dengan ilustrasi pohon yang terdapat pada gambar di bawah:

Struktur macam pohon diatas dapat mempermudah Anda saat menggunakan elemen tertentu. berbagai elemen pada gambar atas dikenal dengan node.

Tidak hanya elemen, tetapi atribut elemen serta teks juga mempunyai kodenya sendiri, yang disebut dengan attribute-node sebagai atribut elemen serta text - node pada teks.

Pada objek pada dokumen HTML terdapat berbagai fungsi serta atribut data yang dapat Anda gunakan ketika menciptakan program Javascript. itulah yang dikenal dengan API (Application Programming Interface).

2.      Cara Menggunakan DOM

Seperti yang telah dijelaskan diatas sebelumnya, DOM merupakan sebuah objek yang digunakan untuk melakukan pemodelan pada dokumen HTML.

Objek DOM pada javascript disebut dengan document. Objek tersebut mengandung berbagai jenis hal yang Anda perlukan untuk melakukan manipulasi HTML.

Apabila Anda mencoba mencetak document di console Javascript, nantinya yang akan muncul merupakan kode HTML.

Pada bagian dalam objek document, ada beberapa jenis fungsi serta atribut yang dapat Anda pakai dalam memanipulasi dokumen HTML. Untuk contohnya adalah fungsi documen.write(). Fungsi tersebut dipakai dalam menulis sesuatu pada dokumen HTML tersebut.

Contoh:

Anda dapat mengetik kode di bawah ini pada dalam console Javascript:

document.write("Hello World");

document.write("<h2>Saya Sedang Belajar Javascript</h2>");

Maka yang akan Anda dapatkan adalah:

Dan hasilnya akan langsung muncul di dokumen HTML.

3.      Dom Document

DOM Document adalah berbagai objek yang ada pada halaman web Anda. Saat akan membuka objek apapun di halaman web, dipastikan Anda pasti akan memulainya dengan dokumen tersebut.

Ada berbagai jenis method serta properties penting yang bisa Anda pakai untuk mengubah dan mengakses sebuah situs web.

4.      Cara Memperoleh Elemen Dengan Nama Kelas

GetElementByClassName() merupakan cara yang dapat membuat lebih dari satu objek. Dengan cara ini Anda akan mendapatkan semua item dengan kelas list-item kemudian menyimpannya pada bagian dalam variabel.

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

3. Cara Memperoleh Elemen Dengan ID

Anda juga dapat mendapatkan lebih dari satu objek apabila memakai metode getElementById(). Dapat dilihat contoh dibawah ini:

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

Dengan cara itu Anda akan memperoleh elemen dengan id header-title, yang selanjutnya akan tersimpan pada isi variabel.

4. Phone Tracker by Number

Metode querySelector() bisa membantu Anda untuk mengembalikan elemen awal yang sama dengan CSS selector yang sebelumnya sudah ditentukan.

Hal tersebut dapat berarti Anda bisa mendapatkan elemen dengan kelas, id, tag dan juga semua CSS selector yang valid. Di bawah ini adalah list dari beberapa pilihan yang sering dipakai.

Get by class:

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

Get by id:

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

Get by tag:

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

5.      Mendapatkan Elemen yang Lebih Spesifik

Apabila Anda mau mendapatkan elemen dengan lebih spesifik maka juga bisa, karena dengan CSS Selector, Anda juga bisa mendapatkan elemen dengan lebih spesifik. Berikut adalah kode nya:

document.querySelector(“h1.heading”);

Contoh di atas adalah ketika Anda mencari kelas dan tag secara bersamaan serta mengembalikan elemen pertama yang melalui CSS Selector.

6.      Queryselectorall

Apabila diatas Anda sudah mengetahui tentang method querySelector(), maka method querySelectorAll() ini bisa dibilang secara utuh sama atau serupa dengan metode querySelector() itu. Hanya saja terdapat perbedaan saat mengembalikan berbagai elemen yang sama pada CSS Selector.

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

Pada contoh di atas, Anda akan mendapatkan berbagai tag h1 yang mempunyai kelas heading dan kemudian tersimpan pada array.

7.      Menambahkan Elemen

Untuk contoh, Anda cuma akan memakai elemen div dengan metode createElement() yang memakai tag name untuk parameternya yang selanjutnya disimpan di dalam variabel.

Ketika sudah, Anda cuma akan memasukan beberapa konten yang selanjutnya dimasukan pada dokumen DOM.

Di bawah ini contoh sintaks yang dipakai dalam menambahkan elemen:

var div = document.createElement(‘div’);

Selanjutnya, Anda akan menciptakan konten dengan metode createTextNode() dengan memakai sebuah String sebagai parameternya yang kemudian menambahkan elemen div yang baru sebelum div yang lama ada di dokumen Anda.

var newContent = document.createTextNode(“Hello World!”); div.appendChild(newContent);

document.body.insertBefore(div, currentDiv);

8.      Menghapus Elemen

Dari sini Anda akan mendapatkan elemen dan menghapusnya dengan metode removeChild(). dan berikut ini merupakan contoh sintaks yang dipakai saat menghapus elemen:

var elem = document.querySelector(‘#header’); elem.parentNode.removeChild(elem);

9.      Mengganti Elemen

Apabila akan mengganti elemen, Anda dapat lihat contoh sintaks dibawah ini:

var div = document.querySelector(‘#div’); var newDiv = document.createElement(‘div’); newDiv.innerHTML = “Hello World2” div.parentNode.replaceChild(newDiv, div);

Pada sintaks di atas, Anda dapat merubah elemen memakai method replaceChild(). Yang mana argumen pertama adalah elemen baru, kemudian argumen kedua adalah elemen yang akan Anda diganti.

Penutup

Itulah pembahasan mengenai Apa itu DOM API pada Javascript dan method yang dapat digunakan.  DOM ini tidak cuman dapat dimanfaatkan di Javascript saja, namun juga pada berbagai Bahasa pemrograman lainnya.