BAB I

PENDAHULUAN
1.1 Latar Belakang Masalah
JavaScript merupakan teknologi pemrograman paling populer peringkat pertama, dan diikuti
dengan HTML/ CSS pada peringkat kedua. Selama tujuh tahun berturut-turut, JavaScript
menjadi bahasa pemrograman yang paling umum digunakan (“Developer Survey Result”,
2019). JavaScript biasanya dipasangkan dengan HTML dan CSS untuk membuat website
maupun aplikasi web. Web Developer adalah jenis pekerjaan yang selalu dibutuhkan dari
tahun ke tahun di era teknologi ini. Apapun jenis bisnisnya ketika ingin memiliki nama
berskala nasional maupun internasional membutuhkan minimal sebuah website untuk
periklanan, sarana komunikasi antara klien dan pemilik, web app untuk melakukan transaksi
daring, atau sekedar company profiles untuk menunjukkan profesionalitas perusahaan.
JavaScript, HTML, dan CSS adalah teknologi pemrograman paling dasar dalam pembuatan
web maupun web app. Namun, tidak jarang ditemukan sebuah web yang dibentuk hanya
menggunakan JavaScript. Setiap elemen di dokumen seperti head, tables, table headers,
maupun isi table merupakan bagian dari Document Object Model (DOM) untuk sebuah
dokumen. Oleh karena itu, semua elemen tersebut dapat diakses dan dimanipulasi
menggunakan DOM dan sebuah scripting language seperti JavaScript (MDN Web Docs
Mozilla, 2019).
JavaScript memiliki kendali penuh dalam web, contoh kendalinya: JavaScript dapat
mengubah semua elemen HTML pada halaman, JavaScript dapat mengubah semua atribut
HTML pada halaman, JavaScript dapat mengubah semua CSS styles pada halaman web,
JavaScript dapat menghapus elemen dan atribut HTML yang ada, JavaScript bisa menambah
elemen dan atribut HTML baru, JavaScript dapat bereaksi terhadap seluruh HTML events di
dalam halaman web, dan JavaScript dapat membuat HTML events baru di dalam halaman
web (w3schools, 2019). JavaScript adalah bahasa pemrograman yang penting karena
JavaScript merupakan bahasa dari web browser. Hubungannya dengan browser membuat
JavaScript menjadi salah satu bahasa pemrograman paling populer di dunia. Web telah
menjadi platform penting untuk pengembangan aplikasi, dan JavaScript merupakan satu-
satunya bahasa yang ditemukan dalam semua browser. Selain kekurangannya, JavaScript
sangatlah ringan dalam performa, tetapi agar dapat menggunakan JavaScript dengan baik,
keterbatasan-keterbatasannya perlu diketahui secara jelas (Crockford, 2008). Client-side
JavaScript berisi beberapa fitur yang membuatnya terlepas dari bahasa pemrograman lainnya.
Pertama, JavaScript dieksekusi dibawah model asynchronous. Ini memungkinkan event
handlers tereksekusi sesuai permintaan, saat pengguna berinteraksi dengan komponen
aplikasi web. Kedua, kebanyakan bagian dari JavaScript dirancang untuk berinteraksi dengan
entitas eksternal yang dikenal sebagai Document Object Model (DOM). Menggunakan DOM,
JavaScript dapat digunakan untuk mengakses atau memanipulasi komponen-komponen yang
tersimpan di dalam DOM sehingga memungkinkan halaman web berubah tanpa memerlukan
sebuah page reload.
Meskipun fitur tersebut memungkinkan sebuah aplikasi web menjadi lebih interaktif, hal
tersebut juga memperkenalkan kesalahan pada kode JavaScript.

1
1.2 Rumusan Masalah Berdasarkan latar belakang yang telah dijelaskan, rumusan
masalahnya adalah sebagai berikut:
1. Pengertian JavaScript DOM & DOM?
2. Bagaimana Cara Mendapatkan Elemen HTML ?
3. Cara Mengubah Elemen HTML ?
4. Menghapus & Menambah Elemen !
5. Menulis Langsung ke HTML Output Stream !

2
 BAB II
PEMBAHASAN
A. Pengertian JavaScript DOM & DOM
Javascript DOM (Document Object Model) adalah interface yang
memungkinkan developer untuk memanipulasi konten, struktur dan style situs web.
Jika Anda ingin mempelajari lebih dalam tentang DOM dan bagaimana Anda dapat
memanipulasinya menggunakan Javascript. DOM Document adalah keseluruhan
objek yang ada di laman web Anda. Jika Anda ingin mengakses objek apa pun di
halaman web Anda, Anda harus selalu mulai dengan dokumen tersebut. Karena ada
banyak properties dan method penting yang bisa Anda gunakan untuk mengakses dan
memodifikasi situs web Anda.
B. Bagaimana Cara Mendapatkan Elemen HTML
1. Mendapatkan elemen dengan ID
Method getElementById() digunakan untuk mendapatkan elemen tunggal dengan
id-nya. Mari kita lihat sebuah contoh:

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

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

dalam variabel.

2. Mendapatkan elemen dengan nama tag

Kita juga bisa mendapatkan elemen kita dengan nama tag

menggunakan method getElementsByTagName().

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

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

Queryselector

Method querySelector() mengembalikan elemen pertama yang cocok dengan

CSS selector yang ditentukan. Itu berarti bahwa Anda bisa mendapatkan elemen
dengan id, kelas, tag dan semua CSS selector yang valid. Berikut adalah daftar
beberapa opsi yang paling populer.

Get by id:

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

Get by class:

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

Get by tag:

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

3. Mendapatkan elemen yang lebih spesifik:

Kita juga bisa mendapatkan elemen yang lebih spesifik menggunakan CSS Selector.

document.querySelector(“h1.heading”);

Dalam contoh ini kita mencari tag dan kelas secara bersamaan dan mengembalikan
elemen pertama yang melewati CSS Selector.

C. Mengubah Elemen HTML

HTML DOM memungkinkan kita mengubah konten dan style elemen HTML

dengan mengubah propertinya.

1. Mengubah HTML

Properti innerHTML dapat digunakan untuk mengubah konten elemen HTML.

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

Dalam contoh ini kita mendapatkan elemen dengan id header dan mengatur

konten inner menjadi “Hello World!”.

InnerHTML juga dapat digunakan untuk menempatkan tag di tag lain.

document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"

Di sini kita meletakkan tag h1 ke semua div yang sudah ada.

2. Mengubah nilai atribut

Anda juga dapat mengubah nilai atribut menggunakan DOM.

document.getElementsByTag(“img”).src = “test.jpg”;

Dalam contoh ini kita mengubah src dari semua tag <img /> menjadi test.jpg.

3. Mengubah style

Untuk mengubah style elemen HTML, kita perlu mengubah properti style elemen

kita. Berikut ini contoh sintaks untuk mengubah style:

document.getElementById(id).style.property = new style

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

document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;

Properti CSS perlu ditulis dalam camelcase bukan nama properti css normal. Dalam
contoh ini kita menggunakan borderBottom.

D. Menambah & Menghapus Elemen

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

1. Menambahkan Elemen

Berikut ini contoh sintaks untuk menambah elemen:

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

Di sini kita hanya membuat elemen div menggunakan method createElement()

yang mengambil tagname sebagai parameter dan menyimpannya ke dalam
variabel. Setelah itu kita hanya perlu memberikan beberapa konten dan kemudian
memasukkannya ke dokumen DOM kita.

var newContent = document.createTextNode("Hello World!");

div.appendChild(newContent);

document.body.insertBefore(div, currentDiv);
Di sini kita membuat konten menggunakan method createTextNode() yang
menggunakan sebuah String sebagai parameter dan kemudian kita memasukkan
elemen div baru sebelum div yang sudah ada dalam dokumen kita.

2. Menghapus Elemen

Berikut ini contoh sintaks untuk menghapus elemen:

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

Di sini kita mendapatkan elemen dan menghapusnya menggunakan method

removeChild().

3. Mengganti Elemen

Berikut ini contoh sintaks untuk mengganti elemen:

var div = document.querySelector('#div');

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

newDiv.innerHTML = "Hello World2"

div.parentNode.replaceChild(newDiv, div);

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

E. Menulis Langsung ke HTML Output Stream

Kita juga dapat menulis ekspresi HTML dan JavaScript langsung ke HTML output
streammenggunakan method write().

document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);

Kita juga dapat meneruskan ekspresi JavaScript seperti objek tanggal.

document.write(Date());

Method write() juga dapat mengambil beberapa argumen yang akan ditambahkan ke
dokumen sesuai dengan kemunculannya.

1. Event Handlers

HTML DOM juga memungkinkan Javascript untuk bereaksi terhadap HTML

event. Berikut adalah daftar beberapa yang paling penting:
 mouse click
 page load
 mouse move
 input field change

2. Assign Events

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

<h1 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h1>

Dalam contoh ini, teks <h1 /> akan berubah menjadi “Halo!” Saat Anda mengklik
tombol.

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

<h1 onclick=”changeText(this)”>Click me!</h1>

Di sini kita memanggil method changeText() ketika tombol diklik dan
meneruskan elemen sebagai atribut.

Kita juga dapat menetapkan event yang sama dalam kode Javascript kita.

document.getElementById(“btn”).onclick = changeText();

6
3. Assign Events Listeners
Berikut ini contoh sintaks untuk menentukan event listeners ke elemen HTML:

document.getElementById(“btn”)addEventListener('click', runEvent);
Di sini kita hanya menetapkan clickevent yang memanggil method runEvent
ketika elemen ‘btn’ Anda diklik.

Anda juga dapat menetapkan beberapa event ke satu elemen:

document.getElementById(“btn”)addEventListener('mouseover', runEvent);

4. Node Relationships

Node dalam DOM Document memiliki hubungan hierarki satu dengan yang
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 <html /> karena
tidak memiliki parent dan merupakan tag teratas di dokumen.

Menavigasi Antar Node

Kita dapat menavigasi antar node menggunakan properti berikut ini:

parentNode
childNodes
firstChild
lastChild
nextSibling
Berikut adalah contoh bagaimana Anda bisa mendapatkan elemen parent dari h1.

var parent = document.getElementById(“heading”).parentNode

7
 BAB III
PENUTUPAN

A. Kesimpulan
Javascript DOM (Document Object Model) adalah interface yang
memungkinkan developer untuk memanipulasi konten, struktur dan style situs web.
Jika Anda ingin mempelajari lebih dalam tentang DOM dan bagaimana Anda dapat
memanipulasinya menggunakan Javascript. DOM Document adalah keseluruhan
objek yang ada di laman web Anda. Jika Anda ingin mengakses objek apa pun di
halaman web Anda, Anda harus selalu mulai dengan dokumen tersebut. Karena ada
banyak properties dan method penting yang bisa Anda gunakan untuk mengakses dan
memodifikasi situs web Anda.
B. Saran
Mayoritas (65%) dari kesalahan kode JavaScript berhubungan dengan DOM,
artinya error dan exception yang didapat ketika mengembangkan suatu web berasal
dari programmer yang salah dalam melakukan interaksi dengan DOM (Ocariza, et al.,
2013). Oleh karena masalah yang ditemukan, diperlukan sebuah aplikasi
pembelajaran untuk membantu pemula yang telah memahami dasar HTML, CSS, dan
JavaScript agar dapat membuat web yang interaktif dan mengurangi kebingungan atau
kesalahan pengembang yang belum fasih dalam pengembangan aplikasi web ketika
berinteraksi dengan Document Object Model. Sudah ada penelitian tentang gamifikasi
pembelajaran bahasa pemrograman Java (Beltran, et al., 2016). Sudah ada penelitian
gamifikasi pembelajaran tentang konsep pemrograman (Elshiekh & Butgerit, 2017).
Namun, belum ditemukan aplikasi metode gamifikasi tentang pembelajaran
JavaScript HTML Document Object Model sehingga hal ini sangat cocok untuk
dijadikan topik penelitian. Di tahun 2015, Yu Kai Chou mencetuskan sebuah
framework gamifikasi yang dapat mengakomodasi pembuatan aplikasi gamifikasi
yang bernama Octalysis. Economou, dkk. menyimpulkan, 4 “We analyzed the
platform’s gamified features using a small number of expert evaluators against
Octalysis gamified framework and we encouraging review of a fairly balanced
simulations that can lead to the creation of motivating and engaging experiences.”
(Economou, dkk. 2015).

Oleh karena itu, aplikasi dengan framework Octalysis dinilai dapat menciptakan
pengalaman yang memotivasi dan menarik bagi para pengguna. Membuat Octalysis
cocok untuk dijadikan framework pengembangan aplikasi pembelajaran JavaScript
HTML Document Object Model.

8
 DAFTAR PUSTAKA

https://techarea.co.id/pengenalan-javascript-dom/

https://kc.umn.ac.id/13657/3/BAB_I.pdf

Tanner, Gabriel. 2019. An introduction to the JavaScript DOM. [Online] Available at

:https://medium.freecodecamp.org/an-introduction-to-the-javascript-dom-512463dd62ec
[Accessed April 5, 2019]