Document Object Model (DOM)

Sejauh ini kita sudah mempelajari bagaimana cara menggunakan JavaScript untuk memanipulasi browser object melalui objek window. Namun, bagaimana jika kita ingin memanipulasi atau mengatur elemen-elemen yang terdapat pada berkas HTML dengan JavaScript? Jawabannya adalah bisa! Yakni melalui Document Object Model.

Apa sih DOM itu? Pada lingkungan browser, DOM memberikan izin bagi kode JavaScript untuk mengakses dan memanipulasi konten pada dokumen melalui sebuah Application Programming Interface (API), yakni sesuatu yang memungkinkan JavaScript dan dokumen HTML untuk "berkomunikasi". Masih ingat Browser Object Model yang diwakilkan oleh objek window yang bisa kita masukkan ke kode JavaScript? Nah, DOM diwakilkan oleh global objek bernama document, yang mana dapat dimanfaatkan oleh JavaScript.

Sebelum mempraktekkan penggunaan DOM dalam JavaScript, yuk kita pelajari bentuk struktur dari sebuah DOM.


DOM Tree

Ketika Anda membaca topik sub-modul ini, kemungkinan akan muncul pertanyaan “Apa hubungannya DOM dengan tree (pohon)?”. Tree yang dimaksud di sini adalah nama dari sebuah struktur data pada komputer yang secara visual mirip seperti sebuah pohon. Struktur data ini disebut tree, karena layaknya pohon terdapat satu batang induk tunggal yang kemudian bercabang menjadi batang-batang lainnya dan bisa saja bercabang kembali. Jika batang tersebut buntu, maka ujungnya terdapat daun (pada struktur data tree, daun disebut sebagai node).</p> <p>Pada berkas HTML, batang induk tunggal adalah elemen <html>, sedangkan cabang-cabangnya adalah elemen-elemen yang terdapat di dalamnya. Misalkan kita mempunyai berkas HTML dengan struktur HTML berikut.

<!DOCTYPE html>
<html>
<head>
  <title>DOM Tree</title>
</head>
<body>
  <h1>Hello Developer Front-End Web!</h1>
  <p>Belajar Membuat Front-End Web untuk Pemula</p>
</body>
</html>

Jika kita buat berkas HTML di atas menjadi dalam bentuk DOM, strukturnya akan menjadi seperti berikut.


Pada contoh yang diberikan di atas, DOM memiliki bentuk struktur data tree yang dibuat berdasarkan berkas HTML di atas. Struktur data tree di atas inilah yang akan direpresentasikan dalam bentuk global obyek bernama document nanti.

Walaupun struktur dari DOM terbentuk berdasarkan isi dari berkas HTML, tetapi ada beberapa skenario tertentu yang menyebabkan struktur DOM berbeda dengan struktur elemen-elemen dalam berkas HTML. Salah satu skenarionya adalah jika terdapat kesalahan penulisan dalam berkas HTML. Mari kita lihat contohnya seperti berikut:

<!DOCTYPE html>
<html>
  Hello World!
</html>

Pada berkas HTML di atas, jelas terlihat bahwa tidak ada elemen dengan tag <head> maupun <body> yang mengakibatkan berkas HTML tersebut tidak valid. Walaupun berkas HTML tersebut tidak valid pada bentuk DOM-nya, object structure-nya akan diperbaiki. Bagaimana caranya? Caranya yakni elemen dengan tag <head> maupun <body> akan ditambahkan secara otomatis kemudian teks “Hello World!” ditempatkan di elemen <body>.


Mencari DOM (Mendapatkan DOM)

Untuk mengakses sebuah elemen HTML melalui DOM, kita gunakan objek yang bernama document. Objek ini berisi semua elemen yang berada pada HTML atau keseluruhan halaman yang terlihat pada jendela browser saat itu. Jika kita coba mengakses nilai dari global obyek document pada console browser maka tampilannya akan sebagai berikut:


Cukup dengan objek document, kita dapat mengakses keseluruhan konten pada HTML yang terdapat root element <html>. Sehingga, jika dicermati kembali di dalamnya terdapat elemen lainnya seperti <head> dan <body>.

Secara sekilas isi dari objek document hanyalah terlihat seperti isi dari sebuah berkas HTML saja. Namun, layaknya sebuah objek JavaScript, objek document memiliki beberapa properti dan method yang bisa kita gunakan untuk mengakses koleksi elemen maupun elemen tertentu. Misalnya, mendapatkan konten-konten pada elemen dengan tag <head> melalui objek document dengan kode berikut:

const head = document.head;


Bagaimana jika kita ingin mendapatkan elemen <body> saja? Caranya hampir sama, yakni dengan kode berikut:

const body = document.body;


Kedua properti yakni head dan body akan mengembalikan elemen yang sama seperti document yakni sebuah objek.

Bagaimana jika kita ingin lebih spesifik lagi? Misalnya sebuah elemen tunggal? Kita bisa menggunakan method-method yang tersedia oleh objek document. Salah satu method yang bisa kita gunakan adalah getElementById(). Method tersebut berfungsi untuk mendapatkan elemen berdasarkan nilai id-nya. Pada contoh di atas, elemen gambar memiliki id "gambarUtama". Jika kita ingin mengakses elemen tersebut, caranya sebagai berikut:

const gambar = document.getElementById('gambarUtama');


Objek document juga memiliki banyak sekali method yang tersedia, berikut beberapa method yang umum digunakan serta fungsinya:

Method Contoh Fungsi
getElementById() document.getElementById('display'); Mengembalikan satu elemen yang memiliki nilai id "display".
getElementsByName() document.getElementsByName('button') Mengembalikan banyak elemen (HTMLCollection) yang memiliki attribute name dengan nilai "button".
getElementsByClassName() document.getElementsByClassName('button') Mengembalikan banyak elemen (HTMLCollection) yang memiliki attribute class dengan nilai "button".
getElementsByTagName() document.getElementsByTagName('div') Mengembalikan banyak elemen (HTMLCollection) yang merupakan <div> element.
querySelector() document.querySelector('.button') Mengembalikan elemen pertama (node) yang menerapkan class "button".
querySelectorAll() document.querySelectorAll('.button') Mengembalikan banyak Node dalam bentuk NodeList yang menerapkan class "button".

Pada method di atas ada yang mengembalikan nilai HTML elemen secara tunggal. Selain itu, ada juga yang mengembalikan banyak elemen dari sebuah berkas HTML yang biasa disebut sebagai HTMLCollection. Dikarenakan semua method di atas dimiliki oleh objek document, maka jangan lupa mengawali semua pemanggilan method-method di atas dengan sintaks document.<nama_method> ya.

Misalnya kita bisa mendapatkan elemen paling pertama yang menerapkan nilai "button" pada atribut class dengan method querySelector('.button').


Sedangkan untuk mendapatkan semua elemen yang nilai atribut class-nya "button", gunakan method querySelectorAll('.button'). Method tersebut akan mengembalikan semua elemen yang sesuai dalam bentuk HTMLCollection.

Ada fakta menarik tentang HTMLCollection, yakni memiliki karakteristik yang mirip dengan array. Contohnya, kita bisa menggunakan properti length untuk mendapatkan jumlah elemen yang terdapat di dalamnya. Selain itu, kita bisa mengakses nilai individual elemennya menggunakan indexing.


Karena HTMLCollection memiliki karakteristik yang mirip dengan array, maka kita juga bisa melakukan looping terhadap elemen-elemennya, yakni melalui sintaks looping for of. Berdasarkan contoh di atas, maka implementasinya sebagai berikut:

for (let item of buttons) {
  console.log(item);
}


Sesuai dengan nama method tersebut, method querySelector() dan querySelectorAll() membutuhkan query khusus sebagai parameternya. Jika tujuan kita adalah mendapatkan elemen berdasarkan atribut class, maka parameternya harus diawali dengan tanda titik ("."), sedangkan jika berdasarkan atribut id, kita harus mengawali nilai parameternya dengan tanda pagar ("#"). Hal ini sama seperti ketika kita bekerja dengan selector di CSS.

Cobalah untuk bereksperimen dengan method-method yang sudah dijelaskan sebelumnya untuk mendapatkan pemahaman yang baik dan elemen yang sesuai. Kemudian carilah perbedaan dari fungsi method-method tersebut.


Membuat Elemen HTML

Manipulasi DOM memberikan kemampuan bagi kita untuk membuat elemen-elemen HTML melalui kode JavaScript. Selain itu, melalui DOM kita mampu membuat konten HTML.

Sekarang mari kita mulai dengan membahas method createElement(). Dengan method tersebut, kita bisa membuat sebuah elemen HTML yang benar-benar baru tanpa memanipulasi isi konten berkas HTML.

Contohnya, jika kita ingin membuat sebuah elemen HTML dengan tag <p> maka sintaksnya adalah sebagai berikut:

const newElement = document.createElement('p');


Mudah sekali bukan? Tetapi tidak cukup jika hanya membuat elemen baru, bagaimana jika kita menambahkan teks? Caranya adalah kita berikan nilai string yang baru dan berikan pada properti innerText .

newElement.innerText = 'Selamat datang ke HTML kosong ini :)';


Misalnya kita ingin menambahkan tag <b> untuk membungkus kata "Selamat datang", maka kita tulis ulang nilai string dan melakukan assignment menggunakan properti innerHTML.

newElement.innerHTML = '<b>Selamat datang</b> ke HTML kosong ini :)';


Contoh di atas menerapkan createElement() untuk membuat teks melalui tag <p>. Apakah method tersebut juga memungkinkan untuk membuat elemen gambar? Jawabannya adalah sangat mungkin! Berikut ini contohnya.

const newElement = document.createElement('img');


Berhasil! Tetapi masih ada yang janggal. Apa gunanya tag <img> jika tidak memiliki atribut src? Untuk memberikan atribut src pada elemen <img>, kita bisa memanggil function setAttribute(). Function ini menerima dua parameter, yaitu nama atribut yang ingin ditambahkan dan nilai yang ingin diberikan dalam artribut tersebut.

Pada contoh sintaks di bawah, kita akan menggunakan sebuah pranala yang memberikan gambar acak. Jadi jangan khawatir jika hasilnya berbeda dengan contoh di bawah.

newElement.setAttribute('src', 'https://picsum.photos/200/300');


Selama kita mengerjakan praktik di atas, pasti Anda menyadari bahwa elemen HTML tidak muncul ketika kita membuatnya. Mengapa demikian? Karena elemen-elemen tersebut belum kita sematkan ke berkas HTML.

Sama halnya jika Anda menyiapkan berbagai bumbu pada piring terpisah. Hidangan tidak akan berubah (menjadi enak) sebelum menuangkan bumbu-bumbu tersebut. Kita akan mempelajari lebih lanjut mengenai penambahan elemen HTML ke berkas HTML pada materi "Menambahkan Elemen HTML".

Jika Anda belum begitu paham dengan apa kegunaan dari innerHTML, innerText, dan setAttribute(), Anda tidak perlu khawatir karena kita akan membahasnya secara rinci pada materi "Mengubah Konten HTML".


Mengubah Konten HTML


Menyiapkan Konten

Sebelumnya kita sudah belajar bagaimana cara mengakses elemen HTML. Sekarang, kita akan belajar bagaimana cara memanipulasi konten dari elemen yang didapatkan, mulai dari mengubah atribut elemen hingga mengubah konten HTML serta styling yang digunakan.

Kali ini, kita akan sering berinteraksi dengan kode JavaScript. Oleh karena itu, disarankan untuk mempraktekkan kode-kode yang dituliskan agar lebih mudah dipahami. Pertama, kita buat terlebih dahulu berkas HTML dengan struktur sebagai berikut.

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Cube World!</title>
  <style>
    button {
      width: 200px;
      font-size: 15px;
      margin: 8px;
      padding: 3px;
    }
  </style>
</head>
<body>
<div align="center">
  <h2>Its Cube Time!</h2>
  <img id="gambar"
       src="https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/commons/homepage-dicoding-challenge-illustration.png"
       alt="Its a rubiks cube!" width="150" height="100">
  <p id="caption"><b>Sudah siap untuk memecahkan teka-teki permainan tersebut?</b></p>
  <div class="button-group">
    <div class="button">
      <button>Sejarah</button>
    </div>
    <div class="button">
      <button>Permainan</button>
    </div>
    <div class="button">
      <button><i>Fun Fact</i></button>
    </div>
    <div class="button">
      <button>Play (Coming Soon)</button>
    </div>
    <div class="button">
      <button>Exit</button>
    </div>
  </div>
</div>
</body>
</html>

Pada tag <div> terdapat atribut align dengan nilai center yang berfungsi untuk memosisikan seluruh child element berada di tengah-tengah parent element-nya. Namun, penggunaan atribut ini sudah usang (deprecated) sehingga penggunaannya sudah tidak di rekomendasikan kembali. Solusinya adalah menuliskan aturan styling menggunakan CSS.

Jika kita jalankan dokumen HTML tersebut, maka hasilnya akan sebagai berikut.


Memanipulasi Atribut Melalui setAttribute

Kita bisa memanipulasi elemen HTML yang kita tangkap melalui DOM. Salah satunya adalah atribut. Method yang digunakan untuknya adalah setAttribute() yang dipanggil dari elemen yang telah ditangkap.

element.setAttribute('nama_atribut_sasaran', 'nilai_atribut_sasaran');

Kita ambil contoh halaman web yang sudah kita praktikan pada awal sub-modul ini:


Tampaknya ada berapa kejanggalan yang bisa kita perbaiki supaya tampilan halamannya lebih keren, yakni:

  • Menyesuaikan ukuran gambar yang terlalu kecil.
  • Menonaktifkan button ke-4 (Play (Coming Soon)).

Baiklah, sepertinya kita bisa mengubah atribut-atribut dari elemen-elemen tersebut. Mari kita mulai dengan mengubah dimensi pada gambar terlebih dahulu.

Kita ingin memperbesar gambar di atas dengan mengubah nilai dari atribut width dan height. Apa langkah pertama kita? Benar, kita harus mengakses atau menangkap elemennya terlebih dahulu.

const gambar = document.getElementById('gambar');


Mantap, kita sudah bisa mengakses elemen gambar yang memiliki atribut id dengan value "gambar". Sekarang, mari kita ubah dimensinya melalui atribut width dan height-nya dengan nilai masing-masing "300" dan "215". Silakan jalankan kode berikut ini.

gambar.setAttribute('width', 300);
gambar.setAttribute('height', 215);


Mantap! Sekarang tampilan gambar terlihat lebih enak dipandang mata! Akhirnya tugas kita yang pertama telah berhasil. Berikutnya adalah mengubah tombol yang memiliki caption "Play (Coming Soon)".

Kali ini, kita tidak bisa mengakses tombol Play Coming Soon melalui method getElementById() karena elemen ini tidak memiliki atribut id yang unik. Lalu, bagaimana kita menyelesaikan masalah ini? Tenang, masih ada satu method yang bisa kita gunakan. Masih ingat dengan method querySelectorAll() yang kita pelajari pada materi "Mencari DOM (Mendapatkan DOM)", kan? Yup, kita bisa menggunakan method tersebut untuk mendapatkan semua button. Jika kita ingat, setiap elemen <div> memiliki atribut class dengan value "button" sehingga kita bisa menangkap elemen button dengan cara berikut.

const buttons = document.querySelectorAll('.button');


Waduh, tampaknya kita belum mendapatkan elemen tombol yang kita inginkan. Hal ini karena kita menangkapnya menggunakan method querySelectorAll(). Bagaimana kita bisa melanjutkan tugas kita? Coba ingat-ingat kembali pada materi "Mencari DOM (Mendapatkan DOM)". Bukankah HTMLCollection bisa kita akses elemen-elemennya seperti layaknya sebuah array? Nah, kuncinya adalah mengambil tombol "Play (Coming Soon)" melalui indexing!

Karena tombol yang kita tuju adalah tombol ke-4 (pada array buttons terletak pada indeks ke-3), cara mengaksesnya seperti berikut.

const playButton = buttons[3];


Mantap! Kita selangkah lebih dekat untuk mendapatkan solusinya. Eits, tunggu dulu, coba perhatikan elemen yang disimpan pada variabel playButton berikut.


Kita baru hanya mendapatkan elemen <div>, sedangkan kita hanya ingin mengakses elemen button. Lantas bagaimana caranya? Kita bisa menggunakan properti children yang akan mengembalikan semua child element yang terdapat di dalam tag <div> dalam bentuk HTMLCollection. Karena elemen tersebut hanya memiliki satu child element, kita bisa memanggilnya dengan indeks 0.

const playButtonElement = playButton.children[0];


Nah, sampai saat ini kita bisa memanggil method setAttribute() pada elemen button yang dituju. Disini kita akan mengubah type dari tombol yang ber-caption "Play (Coming Soon)" menjadi tombol submit. Silakan jalankan kode berikut.

playButtonElement.setAttribute('type', 'submit');


Mantab! Jika diperiksa melalui tab Elements di DevTools, tombol ber-caption "Play (Coming Soon)" sudah menjadi tombol submit.


JavaScript Automatic Type Conversion pada setAttribute()

Jika kita perhatikan pada contoh mengubah atribut "width" maupun "height", parameter kedua menggunakan string yang berisi angka. Namun, apakah Anda mengetahui bahwa kita juga bisa memasukkan tipe data Number daripada string? Jika nilai dari sebuah atribut hanya terdiri dari angka saja (contohnya nilai dari width dan height di atas), maka kode:

gambar.setAttribute('width', '300');

akan memiliki hasil yang sama dengan:

gambar.setAttribute('width', 300);

Mengapa hal ini diperbolehkan? Semua ini memungkinkan karena JavaScript memiliki fitur yang bernama automatic type conversion yang mengkonversi sebuah nilai jika dibutuhkan.


Memanipulasi Konten Melalui innerText, innerHTML, dan style.property

JavaScript mampu mengubah atribut dari sebuah elemen. Namun, ada satu kemampuan JavaScript yang tidak kalah hebat, yakni memanipulasi konten atau isi elemen itu sendiri. Terdapat beberapa cara untuk memanipulasi konten elemen seperti innerText, innerHTML dan style.property.

Pada materi kali ini kita akan menggunakan berkas HTML sebelumnya dengan penambahan beberapa elemen sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Cube World!</title>
  <style>
    button {
      width: 200px;
      font-size: 15px;
      margin: 8px;
      padding: 3px;
    }
    
    main {
      margin: 2px;
    }
  </style>
</head>
<body>
<div id="main" align="center">
  <h2>Its Cube Time!</h2>
  <img id="gambar"
       src="https://raw.githubusercontent.com/dicodingacademy/a315-web-pemula-labs/shared-files/homepage-dicoding-challenge-illustration.png"
       alt="Its a rubiks cube!" width="300" height="215">
  <p id="caption"><b>Sudah siap untuk memecahkan teka-teki permainan tersebut?<b></p>
  <div class="button-group">
    <div class="button">
      <button>Sejarah</button>
    </div>
    <div class="button">
      <button>Permainan</button>
    </div>
    <div class="button">
      <button><i>Fun Fact</i></button>
    </div>
    <div class="button">
      <button disabled="disabled">Play (Coming Soon)</button>
    </div>
    <div class="button">
      <button>Exit</button>
    </div>
  </div>
</div>
<hr size="2" width="95%" color="black">
<div id="links">
  <p>Situs lainnya yang tidak kalah menarik:</p>
  <ul>
    <li><a href="http://www.dicoding.com" id="dicodingLink">Dicoding</a></li>
    <li><a href="http://www.google.com" id="googleLink">Google</a></li>
  </ul>
</div>
</body>
</html>

Pada tag <div> terdapat atribut align dengan nilai center yang berfungsi untuk memosisikan seluruh child element berada di tengah-tengah parent element-nya. Namun, penggunaan atribut ini sudah usang (deprecated) sehingga penggunaannya sudah tidak di rekomendasikan kembali. Begitu juga dengan atribut size, width, dan color dari elemen <hr>. Solusinya adalah menuliskan aturan styling menggunakan CSS.


Perbedaan innerText dan innerHTML

Coba perhatikan isi dari berkas HTML di atas, terdapat sebuah elemen <div> dengan atribut id dengan value "links" yang berisi pranala-pranala eksternal. Dari sini, kita akan coba melihat perbedaan antara innerHTML vs. innerText dalam elemen <div> tersebut. Pertama, kita akses elemen tersebut dengan memanggil method getElementById().

const links = document.getElementById('links');

Kemudian jika kita panggil properti innerHTML, maka berikut tampilan output-nya:


Sedangkan jika kita panggil properti innerText, maka hasilnya seperti berikut.


Apakah Anda melihat kemiripannya? Ya, pada kedua properti tersebut mengeluarkan isi konten elemen yang dituju. Lalu, apa perbedaannya? Perbedaannya adalah innerHTML mengambil semua konten dalam sebuah elemen beserta tag-tag HTML yang ada, sedangkan innerText hanya mengambil teks tanpa tag-tag HTML yang ada. Oke deh, sekarang saatnya kita mulai memanipulasi konten HTML!


Manipulasi Konten dengan innerText

Hmmm setelah kita telaah, ternyata nama-nama pranala di atas kurang menarik, bagaimana jika kita ubah teks yang ditampilkan tanpa menambahkan tag-tag baru? Jika kita hanya ingin mengubah teksnya saja. maka gunakan assignment terhadap innerText.

Misalnya pada halaman web di atas kita ingin mengubah teks "Dicoding" menjadi "Belajar Programming di Dicoding". Maka kita bisa memanggil elemen tersebut terlebih dahulu, lalu memasukkan string "Belajar Programming di Dicoding" melalui pemanggilan properti innerText sebagai berikut.


Sekarang kita akan mencoba memanipulasi konten dengan innerText. Jangan lupa untuk menyiapkan berkas HTML di atas ya.

Pertama kita lihat dulu tampilan berkas HTML di atas. Hasilnya akan seperti berikut.


Ada beberapa konten tambahan yakni daftar pranala eksternal, yang mana akan membawa kita ke homepage Dicoding dan Google. Di sini kita akan mengubah teks konten pada tulisan pranala Dicoding menjadi "Belajar Programming di Dicoding".

Pertama, kita harus mengambil elemen terlebih dahulu. Pada pranala Dicoding, id-nya adalah "dicodingLink", sedangkan pada Google, id-nya adalah "googleLink". Namun, pada praktik kali ini kita hanya mencoba mengubah isi pada pranala Dicoding dahulu.

const dicoding = document.getElementById('dicodingLink');



dicoding.innerText = 'Belajar Programming di Dicoding';


Keren, bukan? Tampilan tulisannya sudah bisa berubah. Silakan Anda terapkan hal di atas untuk pranala Google, di mana pesan pada pranalanya diubah menjadi "Mencari sesuatu di Google". Ingat, nilai id pada pranala Google adalah "googleLink".


Manipulasi Konten dengan innerHTML

Kita sudah mengetahui bahwa innerHTML mengembalikan konten sebuah elemen beserta tag HTML-nya. Apakah Anda bisa menebak apa kegunaan fungsionalitas ini? Kuncinya terletak pada kata tag. Sudah tahu? Betul, dengan melakukan assignment ke properti ini kita bisa menyertakan tag HTML dan merendernya dengan mudah melalui string.

Sekarang kita akan berlatih memanipulasi konten dengan innerHTML. Silakan siapkan kembali dokumen HTML berikut ini.

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Cube World!</title>
  <style>
    button {
      width: 200px;
      font-size: 15px;
      margin: 8px;
      padding: 3px;
    }
    
    #main {
      margin: 2px;
    }
  </style>
</head>
<body>
<div id="main" align="center">
  <h2>Its Cube Time!</h2>
  <img id="gambar"
       src="https://raw.githubusercontent.com/dicodingacademy/a315-web-pemula-labs/shared-files/homepage-dicoding-challenge-illustration.png"
       alt="Its a rubiks cube!" width="300" height="215">
  <p id="caption"><b>Sudah siap untuk memecahkan teka-teki permainan tersebut?</b></p>
  <div class="button-group">
    <div class="button">
      <button>Sejarah</button>
    </div>
    <div class="button">
      <button>Permainan</button>
    </div>
    <div class="button">
      <button><i>Fun Fact</i></button>
    </div>
    <div class="button">
      <button disabled="disabled">Play (Coming Soon)</button>
    </div>
    <div class="button">
      <button>Exit</button>
    </div>
  </div>
</div>
<hr size="2" width="95%" color="black">
<div id="links">
  <p>Situs lainnya yang tidak kalah menarik:</p>
  <ul>
    <li><a href="http://www.dicoding.com" id="dicodingLink">Dicoding</a></li>
    <li><a href="http://www.google.com" id="googleLink">Google</a></li>
  </ul>
</div>
</body>
</html>

Pertama kita lihat dulu tampilan berkas HTML di atas. Hasilnya akan seperti berikut.


Ada beberapa konten tambahan yakni daftar pranala eksternal di bagian bawah halaman web. Masing-masing akan membawa kita ke homepage Dicoding dan Google. Di sini kita akan coba ubah konten HTML pada tulisan pranala Dicoding dan Google sehingga tulisan yang muncul akan miring alias italic. Caranya, tambahkan tag <i> di antara teksnya.

Kita sebelumnya sudah menyimpan elemen dengan atribut id dengan value "dicodingLink" yang disimpan pada variabel "dicoding", maka kita tinggal memanggil atribut innerHTML pada variabel tersebut.

dicoding.innerHTML = '<i>Belajar Programming di Dicoding</i>';

Kemudian lihat bahwa sekarang pranala yang mengandung tulisan "Belajar Programming di Dicoding" akan memiliki gaya font miring alias italic.


Jelas fungsionalitasnya lebih banyak ketimbang innerText karena kita bisa menyematkan teks beserta tag HTML nya yang akan diproses sebagai tag HTML seperti aslinya. Jika Anda melakukan assignment dengan string "<i>Belajar Programming di Dicoding</i>" menggunakan innerText, maka teks akan muncul beserta tag HTML-nya. Sedangkan jika menggunakan innerHTML akan menjadi seperti berikut.


Manipulasi Style Konten dengan style.property

Sebelumnya, kita sudah bisa memanipulasi atribut element dengan method setAttribute, mengubah isi konten elemen dengan properti innerText dan innerHTML. Sebelum menyelesaikan materi ini, kita akan belajar mengubah styling sebuah elemen. Setelah melalui modifikasi yang cukup banyak, akhirnya halaman web kita memiliki tampilan sebagai berikut.


Lalu, bagaimana caranya jika kita ingin membuat tombol-tombol kita memiliki pojok-pojok yang jelas? Kita dapat mengubah styling pada tombol-tombol tersebut menggunakan sintaks style.property. Pada kasus ini, kita ingin menambahkan style berupa border-radius dengan nilai "4px" dari semua button di atas.

Langkah pertama adalah mendapatkan semua elemen button terlebih dahulu. Awalnya kita dapat menggunakan method querySelectorAll(). Bagaimana jika kita bereksperimen dan menggunakan method lain?

Kali ini, mari kita coba gunakan method getElementsByClassName(). Silakan jalankan kode berikut.

const buttons = document.getElementsByClassName('button');

Nah, karena kita tidak menggunakan method querySelector dan querySelectorAll, kita tidak perlu menuliskan selector sebagaimana CSS. Namun, kita bisa memanggil elemen dengan menyebut value dari atribut class yang dituju. Setelah itu, kita akan mendapatkan HTMLCollection, yang mana akan kita lakukan looping terhadapnya. Setiap iterasi yang terjadi, elemen yang didapatkan memiliki properti children yang mengembalikan HTMLCollection, yaitu satu elemen <button>. Untuk mengaksesnya adalah memanggil properti children di dalam looping tersebut dan mengambil child element pertama dengan cara indexing, yaitu button.children[0]. Silakan jalankan kode berikut.

for (const button of buttons) {
  console.log(button.children[0]);
}


Setelah mendapatkan elemen yang dituju (button), kita bisa mengakses memanggil objek style dan diikuti nama properti CSS untuk melakukan perubahan style button.

for (const button of buttons) {
  button.children[0].style.borderRadius = '6px';
}


Lho? Styling yang kita ingin ubah pada asalnya bernama "border-radius", tapi kenapa menjadi "borderRadius"? Singkatnya, nama properti dari objek DOM mengikuti standar penamaan variabel khusus. Penamaannya tidak boleh mengandung tanda "-". Sehingga, nama properti CSS yang memiliki tanda "-" diubah menjadi bentuk camelCase. Contohnya border-radius menjadi borderRadius, font-family menjadi fontFamily, font-size menjadi fontSize, dan seterusnya.


Menambahkan Elemen HTML ke DOM

Pada sub-modul sebelumnya, kita sudah belajar bagaimana cara membuat konten HTML dan memanipulasi konten HTML sehingga dapat berubah "bentuk". Namun, bagaimana jika kita ingin menambahkan elemen HTML yang benar-benar baru? Pada materi ini kita akan mempelajarinya melalui 2 method yakni appendChild() dan insertBefore().

Seperti biasanya, kita akan membuat sebuah berkas HTML terlebih dahulu. Silakan membuat berkas HTML dan strukturnya sebagai berikut.

<!DOCTYPE html>
<html>
  <head>
    <title>Memasak Air</title>
  </head>
  <body>
    <p id="name">Langkah-langkah memasak air</p>
    <ol id="daftar">
      <li id="awal">Masukkan air ke dalam wadah.</li>
      <li id="akhir">Matikan kompor.</li>
    </ol>
    <hr size="2" width="95%" color="black">
  </body>
</html>

Pada tag <hr> terdapat atribut size, width, dan color. Namun, penggunaan atribut-atribut ini sudah usang (deprecated) sehingga penggunaannya sudah tidak di rekomendasikan kembali. Solusinya adalah menuliskan aturan styling menggunakan CSS.

Jika dijalankan melalui browser, maka hasilnya seperti ini.


Oke, kita sudah siap, method pertama yang akan kita pelajari lebih dahulu adalah appendChild().


Menambahkan Elemen dengan appendChild()

Apa fungsi dari method appendChild? Fungsinya adalah menambahkan atau menyisipkan sebuah child elemen ke bagian akhir dari sebuah elemen. Jika Anda belum begitu paham maksudnya, yuk kita praktikkan.

Pada berkas HTML di atas, kita ingin menambahkan langkah baru yakni sebuah pesan berisi "Selamat menikmati!". Rasanya kurang lengkap jika suatu resep tidak diakhiri dengan pesan tersebut.

Sebelum kita memanggil elemen <ol>, bagaimana jika kita membuat sebuah elemen baru terlebih dahulu dengan method createElement(). Elemen yang ingin kita buat adalah elemen <li> karena ingin menambahkan item ke dalam ordered list.

const newElement = document.createElement('li');

Berikutnya, kita masukkan konten teks "Selamat menikmati!" ke dalam elemen <li> tersebut melalui atribut innerText, karena kita hanya ingin memasukkan teks saja tanpa tambahan tag lainnya.

newElement.innerText = 'Selamat menikmati!';

Langkah ketiga adalah mendapatkan parent elemen yakni elemen <ol>.

Jika kita lihat pada console browser, kode JavaScript akan terlihat seperti di bawah ini:


Oke, sejauh ini belum ada perubahan sama sekali di layout HMTL kita. Tenang saja, semua itu akan berubah ketika menggunakan method appendChild() pada variabel daftar.

daftar.appendChild(newElement);

Jika kita lihat hasilnya, maka item list baru berhasil di tambahkan.


Menambahkan Elemen dengan insertBefore()

Tidak seperti method sebelumnya, method insertBefore() memberikan kemampuan untuk menyisipkan elemen sebelum child elemen tertentu dalam parent element. Method ini menerima dua buah parameter, yaitu (1) elemen baru yang ingin disisipkan dan (2) child element yang akan dijadikan patokan diletakkannya elemen baru. Berkas HTML yang telah kita modifikasi sebelumnya menggunakan method appendChild() memiliki tampilan berikut.


Tunggu dulu, apakah daftar langkah-langkah di atas ada yang aneh? Pada langkah ke-2 bertuliskan "Matikan kompor". Namun, kapan kita menghidupkan kompornya? Tampaknya kita harus menambahkan langkah yang bertuliskan "Hidupkan kompor". Mari kita perbaiki.

Pertama, kita perlu membuat elemen baru dengan createElement(). Elemen yang ingin kita buat adalah <li>. Silakan tambahkan kode berikut ini.

const elementAwal = document.createElement('li');

Selanjutnya tuliskan pesan "Hidupkan kompor." ke dalam elemen <li> melalui atribut innerText karena kita hanya ingin memasukkan teks saja tanpa tambahan tag lainnya.

elementAwal.innerText = 'Hidupkan kompor.';

Langkah ketiga adalah mendapatkan parent elemen dari semua elemen <li> yakni <ol>. Namun, kita sudah mendeklarasi dan menginisialisasi variabel daftar pada praktik method appendChild(), maka kita tidak perlu melakukannya lagi.

Pada elemen <ol>, kita melihat bahwa child element pertama memiliki atribut id dengan nilai "awal". Untuk menyisipkan elemen baru pada posisi awal, kita perlu menangkat elemen yang memiliki atribut id dengan value "awal".

const itemAwal = document.getElementById('awal');

Langkah terakhir adalah memanggil method insertBefore pada variabel daftar. Method tersebut akan dipanggil melalui parent element. Parameter pertama pada method tersebut diisi dengan elemen baru yang ingin ditambah berdasarkan elemen yang sudah ditentukan di parameter kedua.

daftar.insertBefore(elementAwal, itemAwal);

Jika kita jalankan pada browser, maka hasilnya akan seperti berikut.


Sekarang kita mempelajari dan memahami dalam membuat, mengubah, dan menambahkan elemen HTML. Pada materi berikutnya, kita akan mempelajari event yang membuat halaman web dapat melakukan hal-hal keren. Sudah siap? Yuk, lanjut!


Sebelumnya : Pengenalan Browser Object Model Selanjutnya : Pengenalan Event di Javascript