Cara menggunakan span innerhtml css

Jika Anda sedang belajar JavaScript, maka Anda tahu bahwa JavaScript bisa menyulap halaman website jadi lebih dinamis dan menarik. Namun tahukah Anda, hal itu bisa terjadi lewat bantuan DOM. Tunggu dulu, apa itu DOM?

Singkatnya, DOM JavaScript adalah sesuatu yang bisa memanipulasi halaman web HTML. Di artikel ini, Anda akan belajar apa itu DOM JavaScript, fungsinya, sampai cara memanipulasi HTML lewat JavaScript DOM.

Penasaran kan? Langsung saja, ini dia penjelasan selengkapnya!

Daftar isi

Apa itu DOM JavaScript?

Cara menggunakan span innerhtml css

DOM JavaScript adalah interface yang memungkinkan developer memanipulasi halaman web dari segi struktur, tampilan, dan kontennya. Nah, DOM adalah singkatan dari Document Object Model.

Awalnya, website tersusun dari HTML dan CSS style yang statis. Hingga akhirnya muncul JavaScript. JavaScript adalah bahasa pemrograman untuk menyulap website jadi lebih dinamis.

Lantas, bagaimana bahasa statis dan dinamis di atas saling berkomunikasi?

Ternyata, browser menciptakan dokumen yang dikenal sebagai DOM untuk setiap halaman web. Nah, DOM inilah yang memungkinkan JavaScript mengakses sekaligus memanipulasi semua elemen statis di halaman tersebut.

Anda penasaran seperti apa struktur DOM dari halaman website? Berikut kami sajikan script HTML dari halaman web sederhana:

Cara menggunakan span innerhtml css

Sementara ini dia hasil script tersebut setelah diolah menjadi DOM:

Cara menggunakan span innerhtml css

Bisa Anda lihat, HTML adalah elemen induk. Ia mempunyai dua elemen anakan yaitu Head dan Body. Begitu seterusnya hingga sampai elemen yang terkecil. Nantinya, setiap elemen dapat dimanipulasi oleh developer dengan bantuan JavaScript.

Nah, itu tadi sekilas tentang apa itu DOM JavaScript. Yuk mengenal fungsi JavaScript DOM di poin selanjutnya!

Baca juga: Cara Membuat JavaScript di HTML

Fungsi DOM

Seperti yang dibahas di poin apa itu DOM, Anda tahu bahwa fungsi DOM JavaScript adalah untuk memanipulasi halaman website menjadi lebih dinamis. Bagaimana cara kerjanya?

Ternyata, DOM melakukannya dengan cara mengambil, mengubah, menambah, maupun menghapus elemen HTML. Hal ini akan dibahas lebih detail di bagian lain artikel.

Lebih jauh, ketika memanipulasi halaman, DOM juga mengumpulkan data, fungsi, dan atribut milik elemen yang diakses. Nah, properti tersebut dapat dipakai untuk tujuan lain.

Misalnya, untuk membuat API atau Application Programming Interface, serta mengambil data website dengan metode Web Scraping.

Sampai di sini, Anda sudah paham tentang pengertian dan fungsi DOM JavaScript. Yuk lanjut belajar cara memanipulasi elemen HTML dengan JavaScript DOM!

Baca juga: Framework JavaScript

Cara Mengambil Elemen HTML

Untuk mengambil elemen HTML, DOM JavaScript menggunakan beberapa metode:

1. Mengambil Elemen dengan ID

Cara ini dilakukan melalui method getElementByID(). Berikut contoh scriptnya:

var title = document.getElementById(footer-title’);

Dari situ, JavaScript DOM dapat mengambil elemen dengan ID footer-title lalu menyimpannya ke dalam sebuah variabel.

Baca juga: Perbedaan Java dan JavaScript

2. Mengambil Elemen dengan Class

Anda bisa mendapatkan elemen dengan method getElementsByClassName(). Ini dia contoh scriptnya:

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

Bedanya, di sini, DOM JavaScript bisa mengambil tidak hanya satu, tapi semua elemen di bawah Class list-items.

Baca juga: Custom JavaScript dan CSS di WordPress

3. Mengambil Elemen dengan Nama Tag

Anda juga bisa mendapat lebih dari satu elemen dengan method getElementsByTagName(). Contohnya seperti ini:

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

Nantinya, JavaScript DOM akan mengambil semua elemen dengan Tag li, untuk kemudian disimpan sebagai variabel.

Baca juga: Membuat Countdown Timer dengan JavaScript

4. Mengambil Elemen dengan querySelector

Tak hanya HTML, DOM JavaScript juga bisa Anda manfaatkan untuk mengambil elemen CSS. Caranya, dengan method querySelector. Berikut beberapa contoh scriptnya:

1. Mengambil elemen CSS dengan ID:

var header = document.querySelector(‘#footer)

2. Mengambil elemen CSS dengan Class:

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

3. Mengambil elemen CSS dengan Tag:

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

4. Mengambil elemen CSS secara lebih spesifik:

document.querySelector(“h2.footer”);

Baca juga: AJAX JavaScript

5. Mengambil Elemen dengan querySelectorAll

querySelectorAll adalah alternatif method lain untuk mengambil elemen CSS. Method ini tak ada bedanya dengan method sebelumnya. Ini dia contohnya:

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

Baca juga: Cara Membuat Website HTML CSS

Cara Mengubah Elemen HTML

JavaScript DOM memungkinkan Anda mengubah struktur, isi konten, dan tampilan elemen HTML dengan beberapa metode berikut:

1. Mengubah Konten HTML

Anda bisa mengubah konten HTML menggunakan properti innerHTML. Nah, properti ini dapat dikombinasikan dengan method getElementbyID() seperti berikut:

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

Atau, bisa juga digabungkan dengan method getElementsByTagName() seperti ini:

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

Baca juga: JQuery Adalah

2. Mengubah Value dari Atribut

Tak hanya sekadar mengubah konten, DOM JavaScript juga bisa Anda pakai untuk mengganti value dari sebuah atribut. Contohnya seperti script di bawah:

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

Dengan begitu, JavaScript DOM akan mengubah value dari atribut img menjadi image.jpg.

Baca juga: JSON Adalah

3. Mengubah Style/Tampilan

JavaScript DOM ternyata juga berguna mengubah style elemen HTML maupun CSS. Namun untuk melakukannya, Anda perlu mengubah properti style terlebih dahulu seperti ini:

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

Baru setelahnya, Anda bisa mengambil elemen tertentu untuk kemudian diubah style-nya. Contohnya di sini, kami mengubah style dari borderBottom:

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

Baca juga: Kode Warna HTML

Cara Menambah dan Menghapus Elemen HTML

Selain untuk keperluan mengambil dan mengubah elemen HTML, DOM JavaScript juga bisa Anda pakai untuk menambah dan menghapus elemen, loh. Begini caranya:

1. Cara Menambah Elemen

Untuk menambahkan elemen baru, Anda cukup menggunakan method createElement() seperti ini:

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

Dari situ, JavaScript DOM akan membuat sebuah elemen bernama div. Setelahnya, Anda bisa mengisi elemen tersebut dengan konten baru. Berikut contohnya:

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

2. Cara Menghapus Elemen

Sedangkan untuk menghapus elemen, Anda bisa memakai method removeChild(). Berikut contohnya:

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

3. Cara Mengganti Elemen

DOM JavaScript juga memungkinkan Anda mengganti elemen yang sudah ada. Pertama-tama, Anda perlu membuat elemen baru seperti ini:

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

Kemudian, waktunya mengganti elemen di atas. Caranya dengan menulis script di bawah:

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

4. Menulis Elemen Langsung ke HTML Output Stream

Salah satu keunikan DOM JavaScript adalah kemampuannya untuk menggabungkan HTML dan JavaScript ke dalam satu baris kode. Nah, hal ini bisa dilakukan dengan method write() seperti di bawah:

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

Selain dapat berisi teks seperti di atas, method write() ini juga bisa dipakai untuk menginput object, contohnya Date seperti ini:

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

Nah, itu dia panduan lengkap cara memanipulasi elemen memakai JavaScript DOM. Jangan beranjak dulu karena kami masih punya beberapa info penting!

Baca juga: Cara Memasukkan Gambar di HTML

Event Handlers

Cara menggunakan span innerhtml css

Selain untuk memanipulasi elemen HTML, DOM JavaScript juga bisa Anda manfaatkan untuk menangani Event (Event Handling). Singkatnya, Event adalah reaksi halaman website ketika pengguna melakukan sesuatu, misalnya mengklik sebuah tombol.

Nah, beberapa Event yang biasa ditemukan di website antara lain:

  • Klik kiri atau kanan mouse
  • Gerakan mouse
  • Transisi loading halaman
  • Perubahan atau transisi input form

1. Mensetup Event

Anda bisa mensetup Event menggunakan properti innerHTML seperti script berikut:

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

Apabila pengguna mengklik button Please click!, maka button tersebut akan memunculkan pesan Thank you!

2. Mengatur Event Listener

JavaScript DOM juga memungkinkan Anda mengatur Event Listener. Dengan begitu, halaman web akan merespons Event yang dilakukan pengguna. Nah, ini dia contoh scriptnya:

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

Ketika pengguna menjauhkan mouse dari tombol btn, maka halaman web secara otomatis akan merespons Event tersebut. Seperti apa bentuknya? Nah, hal ini bisa diatur lebih jauh sesuai kebutuhan si developer.

Baca juga: Belajar HTML

Node Relationship

Cara menggunakan span innerhtml css

Di bagian apa itu DOM, Anda tahu bahwa sebuah halaman web terdiri dari banyak elemen. Nah, elemen tersebut ternyata saling berhubungan satu sama lain. Itulah yang disebut dengan Node Relationship.

Node Relationship ini menghubungkan tiap-tiap elemen layaknya pohon keluarga, seperti:

  • parentNode – Elemen Induk.
  • childNodes – Elemen anakan.
  • firstChild – Elemen anakan pertama.
  • lastChild – Elemen anakan terakhir.
  • nextSibling – Elemen saudara.

Sebagai contoh, Anda bisa mendapatkan elemen induk dari heading dengan script di bawah:

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

Baca juga: Contoh Coding HTML

Sudah Paham Apa itu DOM, kan?

Di artikel ini, Anda sudah memahami apa itu DOM JavaScript, fungsi DOM, cara memanipulasi elemen dengan JavaScript DOM, serta belajar tentang Event Handlers dan Node Relationship.

Mengingat fungsinya yang beragam, kami sarankan Anda belajar JavaScript DOM secara tekun. Bagaimana caranya? Pertama, tentu saja dengan mempraktikkan script DOM yang sudah kami sajikan, sekaligus memodifikasinya.

Kedua, tak ada salahnya mengupload website ber-script DOM tersebut ke hosting domain. Sehingga, Anda jadi punya gambaran seperti apa tampilan, struktur, dan konten website ketika diakses pengunjung.

Nah, jika Anda butuh hosting untuk website HTML dan JavaScript, layanan Unlimited Hosting dari Niagahoster bisa jadi pilihan. Kenapa?

Layanan ini dilengkapi berbagai fitur menarik, seperti cPanel versi baru dan akses FTP untuk kemudahan mengelola file website. Harganya juga sangat terjangkau, mulai Rp9 ribuan/bulan saja! Dijamin, cocok buat Anda yang sedang belajar membuat website!

Yuk cobain Unlimited Hosting Niagahoster sekarang!

Saya Ingin Mencoba Layanan Hosting Murah Indonesia Sekarang!

Share

Muhammad Ariffudin Follow also known as Ariffud

Subscribe Sekarang

Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!

Span CSS untuk apa?

Umumnya, elemen span digunakan untuk tujuan styling dengan memanfaatkan CSS. Beberapa atribut yang umum digunakan di elemen span adalah style, class dan id. Misalnya, Anda ingin memberi style pada bagian tertentu teks pada paragraf (tag <p>).

Apa perbedaan antara SPAN dan DIV?

Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam in-line tag. Kedua paragraf akan memiliki efek yang sama. Namun pada paragraf kedua kita hanya menggunakan tag div dan span.

Apa itu inner HTML?

innerHTML adalah sebuah atribut di dalam (objek) elemen HTML yang berisi string HTML. Dengan innerHTML , kita dapat menampilkan output ke elemen yang lebih spesifik.

Apa itu DOM dalam JavaScript?

“DOM atau Document Object Model merupakan objek JavaScript spesial yang hanya ada di environment Browser. Objek ini digunakan untuk mendapatkan struktur dokumen website, bahkan memanipulasinya.”