Method apakah yang digunakan untuk mendapatkan nama class dari sebuah html element?

Saat ini membuat website semakin mudah. Anda bisa menghadirkan sebuah website yang interaktif dengan bantuan JavaScript. Untuk mewujudkan hal tersebut, Anda memerlukan DOM. 

DOM merupakan sebuah objek standar untuk HTML dan XML yang mempunyai sifat platform independent. Ketika Anda membuka website melalui browser, file HTML yang ada di website tersebut akan memuat lalu muncul di layar perangkat Anda.

Bagi Anda yang ingin tahu lebih dalam seputar apa itu DOM JavaScript, berikut ini kami akan mengulas secara lengkap. Simak penjelasan pada artikel berikut ini.

• Apa Itu DOM JavaScript?
• Fungsi DOM
• Cara Mengambil Elemen HTML
  • 1. Dengan Nama Class
  • 2. Dengan Nama ID
  • 3. Dengan Nama Tag
  • 4. Dengan QuerySelector
  • 5. Memperoleh Elemen Secara Lebih Spesifik
  • 6. QueryselectorAll
• Cara Menambah Elemen HTML dan Menghapusnya
  • 1. Cara Menambah Elemen HTML
  • 2. Mengganti Elemen HTML
  • 3. Menghapus Elemen HTML
  • 4. Menulis Secara Langsung ke HTML Output System
• Cara Mengubah Elemen HTML
  • 1. Mengubah Nilai Atribut
  • 2. Mengubah HTML
  • 3. Mengubah Style
• Event Handlers
• Gunakan DOM untuk Mempercantik Website Anda
• Pertanyaan yang Sering Diajukan?

Apa Itu DOM JavaScript?

DOM adalah singkatan dari (Document Object Model). Ini dalah sebuah interface yang memungkinkan Anda sebagai developer untuk memanipulasi style, konten dari sebuah website. Sebenarnya DOM bukan hanya bisa Anda temukan pada JavaScript. Anda bisa menemukan istilah tersebut di bahasa pemrograman yang lain.

Untuk tingkat yang paling sederhana, sebuah web di dalamnya terdapat CSS serta dokumen HTML. Browser bertugas untuk memunculkan hasil dari sebuah dokumen yang bernama DOM atau Document Object Model. Adanya dokumen ini membuat JavaScript bisa mengakses maupun memanipulasi elemen.

DOM juga memungkinkan adanya style pada situs website. Selain itu, model ini juga diatur di dalam sebuah struktur objek dan mendefinisikan:

• Elemen HTML yang berperan sebagai objek
• Properties serta event elemen HTML
• Method agar bisa mengakses elemen HTML

Objek dokumen adalah sebuah model dokumen HTML yang di dalamnya terdapat kumpulan fungsi dan atribut berupa objek dengan berdasarkan elemen HTML. Dokumen tersebut bisa Anda ilustrasikan dengan gambar seperti berikut:

Struktur di atas akan memudahkan Anda ketika ingin menggunakan elemen tertentu. Elemen-elemen yang ada di atas bernama node. Bukan hanya elemen melainkan teks serta atribut elemen juga mempunyai node tersendiri. Node-node tersebut misalnya text-note untuk keperluan teks dan attribute-note untuk keperluan atribut elemen.

Fungsi DOM

Setelah mengetahui pengertian DOM, untuk fungsinya sendiri adalah memungkinkan untuk memanipulasi tampilan web menggunakan JavaScript. Pada saat proses dari render file HTML sedang berlangsung, browser membuat model objek dokumen atau DOM.

Selanjutnya objek yang berasal dari dokumen tersebut akan menyediakan kumpulan data, fungsi, serta atribut agar bermanfaat pada saat membuat program JavaScript. Inilah yang kita kenal dengan istilah API atau Application Programming Interface.

Cara Mengambil Elemen HTML

Anda sudah memahami bahwa DOM JavaScript adalah bagian juga memungkinkan adanya style pada situs website. Informasi berikutnya yaitu bagaimana cara mengambil elemen HTML.

1. Dengan Nama Class

getElementsByClassName() merupakan sebuah method yang dapat menghasilkan lebih dari satu objek. Melalui method ini Anda juga akan memperoleh semua item yang terdapat kelas list-item. Kemudian Anda bisa menyimpannya dalam variabel.

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

2. Dengan Nama ID

Anda juga dapat mendapatkan lebih dari satu objek ketika menggunakan metho berupa getElementById(). Silakan perhatikan contoh di bawah ini:

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

Dari sini kemudian Anda bisa memperoleh elemen lengkap dengan id header-title. Selanjutnya bisa Anda simpan ke variabel.

3. Dengan Nama Tag

Mendapatkan nama tak juga bisa menggunakan method getElementBtTagName(). Untuk contohnya seperti di bawah ini:

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

Selanjutnya Anda bisa memperoleh seluruh elemen Ii yang berasal dari dokumen HTML. Lalu Anda bisa menyimpannya dalam variabel.

4. Dengan QuerySelector

Bagaimana dengan Queryselector? Sebuah method querySelector() memungkinkan Anda untuk bisa mengembalikan elemen yang pertama. Pengembalian tersebut sudah sesuai dengan SS selector yang telah Anda tentukan sebelumnya.

Hal ini menunjukkan bahwa Anda bisa memperoleh elemen menggunakan ID, kelas, tag, dan juga seluruh CSS selector yang sudah valid. Berikut ini adalah beberapa daftar pilihan yang sudah sering digunakan:

• Get by id : let header = document.querySelector(‘#header’)
• By class : let items = document.querySelector(‘.list-items’)
• By tag : let headings = document.querySelector(‘h2’);

5. Memperoleh Elemen Secara Lebih Spesifik

Apakah Anda ingin mendapatkan elemen yang sifatnya lebih spesifik? Tidak perlu khawatir karena Anda bisa memanfaatkan CSS Selector. Caranya yaitu dengan:

document.querySelector(“h2.heading”);

contoh di atas bisa Anda terapkan pada saat mencari tag maupun kelas dalam waktu bersamaan. Anda juga bisa menggunakannya ketika ingin mengembalikan elemen yang pertama dengan melalui CSS Selector.

6. QueryselectorAll

Jika Anda sudah mengetahui seputar method querySelector(), sekarang kami akan menjelaskan method querySelectorAll(). Sebenarnya ini tidak jauh berbeda atau bahkan sama pada saat Anda menggunakan method querySelector().

Namun keduanya mempunyai perbedaan. Perbedaan tersebut adalah pada saat Anda mengembalikan seluruh elemen yang sama dengan memanfaatkan CSS Selector.

let heading = document.querySelectorAll(‘h2.heading’);

Berdasarkan contoh tersebut, Anda bisa mendapatkan seluruh tak h2 yang telah memiliki kelas heading. Kemudian Anda bisa menyimpannya di dalam array.

Cara Menambah Elemen HTML dan Menghapusnya

HTML DOM adalah memungkinkan Anda agar bisa menambah elemen baru. Selain itu, Anda juga bisa menghapus elemen yang telah ada sebelumnya.

1. Cara Menambah Elemen HTML

Misalnya Anda hanya berniat untuk menghadirkan elemen div dengan memanfaatkan method createElement(). Method ini akan mengambil tagname sebagai parameternya. 

Lalu menyimpannya dalam variabel. Ketika sudah tersipan, Anda cukup membuat beberapa konten. Langkah berikutnya adalah Anda harus memasukkannya ke dalam dokumen HTML.

Berikut ini merupakan contoh sintaks yang bisa Anda gunakan untuk bisa menambahkan elemen:

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

Sekarang Anda harus membuat konten menggunakan method createTextNode() melalui String yang berperan sebagai parameternya. Lalu Anda harus memasukkan elemen div baru sebelum memasukkan div lama pada dokumen Anda.

let newContent = document.createTextNode(“Hello World!”);
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

2. Mengganti Elemen HTML

Bagi yang ingin mengubah elemen, maka Anda perlu memperhatikan contoh dari sintaks di bawah ini:

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

berdasarkan sintaks tersebut, Anda dapat mengganti elemen dengan memanfaatkan method replaceChild(). Nanti argumen pertama adalah elemen baru. Sementara pada argumen kedua yaitu elemen yang telah Anda ganti.

3. Menghapus Elemen HTML

Anda bisa mendapatkan elemen dan menghapusnya. Method yang Anda gunakan adalah removeChild(). Berikut ini merupakan contoh dari sintaks yang bisa Anda gunakan agar bisa menghapus elemen HTML.

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

Selain cara sebelumnya yang sudah kami jelaskan, ternyata Anda juga dapat menulis ekspresi HTML maupun JavaScript secara langsung. Anda bisa menulisnya ke dalam HTML Output System. Method yang harus Anda gunakan adalah write(). Silakan memperhatikan contoh berikut ini:

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

Selain itu, Anda juga dapat meneruskan ekspresi dari JavaScript. Contohnya ketika ingin menggunakan objek tunggal, maka methodnya yaitu:

document.write(Date());

Sebagai informasi bahwa method write() juga dapat Anda gunakan di dalam mengambil beberapa argumen. Nanti artinya akan ditambahkan pada dokumen yang sebelumnya telah Anda sesuaikan kemunculannya.

Cara Mengubah Elemen HTML

Materi berikutnya masih tentang DOM adalah bagaimana cara agar bisa mengubah elemen HTML. Adanya HTML DOM membuat Anda dapat mengubah konten maupun style yang berasal dari elemen HTML. Caranya adalah dengan mengubah propertinya.

1. Mengubah Nilai Atribut

DOM JavaScript membuat Anda juga bisa mengubah nilai atribut. Misalnya Anda ingin mengubah src yang berasal semua tak <img /> agar menjadi test.jpg. Contoh sintaks yang bisa Anda gunakan yaitu:

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

2. Mengubah HTML

Anda bisa menerapkan Properti innerHTML ketika ingin mengubah konten dari elemen HTML. Contohnya ketika Anda ingin mendapatkan elemen dengan memanfaatkan id header dan mengatur konten inner hingga menjadi ‘Hay Love!”. Sintaks yang harus Anda gunakan yaitu:

document.getElementById(“#header”).innerHTML = “Hay Love!”;

Selain itu, Anda juga bisa menerapkan innerHTML agar bisa meletakkan tag yang satu pada tag yang lainnya. Contohnya:

document.getElementsByTagName(“div”).innerHTML = “<h2>Hay Love!</h2>”

Maka dari itu Anda bisa menempatkan tag h2 pada seluruh div yang telah ada sebelumnya.

3. Mengubah Style

Sebelum Anda ingin mengubah style, maka Anda harus mengubah property style terlebih dahulu. Contoh sintaks untuk bisa mengubah style elemen tersebut yaitu:

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

Kemudian Anda bisa memperhatikan contoh sintaks setelah ini. Sintaks tersebut bermanfaat untuk bisa memperoleh elemen dan mengubah batas bawah hingga menjadi garis hitam yang pekat.

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

Untuk informasi tambahan, properti CSS harus Anda tulis menggunakan camelcase dan tidak menggunakan nama properti CSS normal. Seperti halnya pada contoh di atas adalah memakai borderBottom.

Event Handlers

Bukan hanya dapat melakukan hal-hal seperti di atas, HTML DOM adalah juga bisa untuk membuat JavaScript bereaksi ketika menggunakan HTML event. Ada beberapa hal penting yang perlu Anda perhatikan seperti:

• Mouse click
• Input field change
• Page load
• Mouse move

Salah satu contoh coding untuk event click adalah seperti berikut:

<button id=”tombol”>Klik saya</button>
<script>
let btnHello = document.querySelector(“#tombol#”);
btnHello.addEventListener(‘click’, () => {
  alert(‘Terima kasih sudah diklik’);
});
</script>

Jadi, pada coding tersebut adalah memberitahu web browser bahwa ketika tombol dengan ID bernilai “tombol” diklik, nantinya akan muncul alert bertuliskan “Terima kasih sudah diklik”.

Gunakan DOM untuk Mempercantik Website Anda

Sekian pembahasan tentang pengertian DOM dan hal-hal yang berkaitan dengannya. Jadi, sebenarnya DOM bukan hanya bisa Anda gunakan untuk JavaScript saja. Anda juga bisa memanfaatkannya pada bahasa pemrograman yang lain. Semoga bermanfaat.

Pertanyaan yang Sering Diajukan?