Mengambil Elemen di HTML

Oleh Ardhana Pragota

Melalui kelas ini, kamu diajak untuk:

  • Mengambil elemen HTML untuk dimanipulasi dengan Javascript

Konsep Dasar DOM

Pada mulanya JavaScript lahir untuk mempercantik laman website dengan efek interaktif. JavaScript dibangun dari berbagai objek yang serupa dengan sebuah benda yang kita pakai yang memiliki bentuk dan fitur. Ambil contoh sebuah mobil yang memiliki bentuk dan warna.

Untuk membuat website menjadi objek bergerak, web programming menggunakan Document Object Modelling untuk memanipulasi objek-objek yang ada di web.

Tugas JavaScript

JavaScript kerap diberi tugas mengurusi elemen bergerak dalam laman website seperti efek interaktif. Berikut detailnya:

Menambahkan konten gambar dan teks di webpage.

Mengubah style (bentuk, warna, ukuran) di CSS konten webpage.

Membuat tombol interaktif.

Memberi efek-efek untuk interaksi user (klik, scroll, typing).

Mengambil Elemen HTML

Mari segarkan kembali ingatan kita soal tag, elemen, dan atribut yang jamak ada di dokumen HTML. Mari kita buat terlebih dahulu dokumen HTML beserta file JavaScript di folder terpisah bernama dom.js seperti berikut.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>Document</title>
</head>
<body>
    <h1 id="judul">DOM</h1>
    <div>
        <p>Hello, World</p>
        <p>lorem ipsum</p>
        <p class="error">Laman ini mengalami error</p>
        <div class="error">Laman ini mengalami error lagi.</div>
    </div>
    <script type="dom.js"></script>
</body>
</html>

Nantinya, JavaScript akan mendapat perintah untuk memanipulasi elemen di dalam tag seperti <p>, atau atribut <style> . Mari lihat teknik berikut.

Mencari Elemen

Cara paling dasar dalam mengubah elemen dengan mengambil satu elemen HTML kemudian dimasukkan dalam variable.

const para = document.querySelector('p');

Ingat, ketika menggunakan DOM, gunakan document lalu sandingkan dengan object di JavaScript. Kode di atas adalah mengambil tag <p> pertama di dokumen HTML.

Mengambil Salah Satu Elemen

Untuk mengambil class, pastikan terlebih dahulu class mana yang mau diambil jika dokumen HTML memiliki berbagai line dalam class yang sama.

const para = document.querySelector('div.p');

Mengambil Semua Elemen

Dokumen HTML pasti memiliki satu jenis tag yang digunakan berkali-kali. Bagaimana jika ingin memanipulasi semuanya? Lihat kode di bawah.

const para = document.querySelectorAll('p');

Atau kita ingin mengambil class yang sama dengan tag berbeda. Misalnya dokumen HTML di atas memiliki class="error" di tag <p> dan <div>. Berikut cara mengambilnya.

const para = document.querySelectorAll('.error');

Caranya serupa dengan mengambil tag <p>.

Mengambil Elemen CCS

Styling di CSS menggunakan ID, class, atau tag HTML. Buat file HTML yang sama seperti sesi sebelumnya.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>Document</title>
</head>
<style>
.p {
    font-size: 30px;
}
.error {
    width: 70%;
}

</style>
<body>
    <h1 id="judul">DOM</h1>
    <div>
        <p>Hello, World</p>
        <p>lorem ipsum</p>
        <p class="error">Laman ini mengalami error</p>
        <div class="error">Laman ini mengalami error lagi.</div>
    </div>
    <script type="dom.js"></script>
</body>
</html>

Ketiganya bisa dimanipulasi lewat DOM JavaScript dengan cara berikut:

ID

Mengambil ID atau label unik dalam HTML dan CSS.

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

Pemilihan ID akan menggunakan getElementById, yang diikuti nama ID berupa string atau kata dengan tanda kutip.

Class

Untuk mengambil class, pastikan terlebih dahulu class mana yang mau diambil jika dokumen HTML memiliki berbagai line dalam class yang sama.

const errors = document.getElementsByClass('error');

Tag

Dokumen HTML pasti memiliki satu jenis tag yang digunakan berkali-kali. Bagaimana jika ingin memanipulasi semuanya? Lihat kode di bawah.

const para = document.getElementByTagName('p');

NodeList vs HTML

Pada mulanya JavaScript lahir untuk mempercantik laman website dengan efek interaktif. JavaScript dibangun dari berbagai objek yang serupa dengan sebuah benda yang kita pakai yang memiliki bentuk dan fitur. Ambil contoh sebuah mobil yang memiliki bentuk dan warna.

Untuk membuat website menjadi objek bergerak, web programming menggunakan Document Object Modelling untuk memanipulasi objek-objek yang ada di web.

Selamat, Anda telah menyelesaikan pelajaran ini
Klik untuk menyelesaikan