Atribut Properti DOM HTML dan Fungsinya
Properti atribut pada DOM HTML berfungsi untuk mengembalikan kelompok atribut node yang ditentukan berdasarkan object NamedNodeMap. Object NamedNodeMap merepresentasikan koleksi dari atribut object dan membuatnya dapat diakses sesuai dengan nomor indeks yang dimulai dari angka 0.
Sintak: node.attributes
Return Value: berfungsi untuk mengembalikan object NamedNodeMap yang merupakan bagian dari koleksi node.
Catatan: pada tipe Internet Explorer 8 dan versi sebelumnya, atribut properti akan mengembalikan sebuah koleksi dari segala kemungkinan atribut untuk elemen yang akan menghasilkan nilai tertinggi daripada yang diperkirakan.
Contoh:
Sebelum memahami lebih dalam materi tentang Atribut Properti DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Membuat Node Teks HTML Menggunakan appendChild DOM, Properti accessKey DOM HTML dan Fungsinya, dan Membuat Dokumen HTML Menggunakan Writeln DOM.
Return Value: berfungsi untuk mengembalikan object NamedNodeMap yang merupakan bagian dari koleksi node.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Atribut DOM pada HTML
</title>
</head>
<body>
<!-- Pengaturan Gambar -->
<img
id = "MKN"
src =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtScPwjtA7g64aDduxeEd6YdFJqUYA2IU0Vv2ysXZEw4PVziHYCoGp4SRQh6zz0BhzgZJ07-_-0M7-Hj70c0nWxZ85Iz3icubb5fR-UJYoreKKAk9JDuitrkcAX1yCKoeO93LrxHwgps/s2048/logo+sman+8+semarang.png" >
<br>
<button
onclick = "mydons()">
Properti Atribut DOM
</button>
<p id = "demo"></p>
<script>
function mydons()
{
// Mengembalikan angka dari
// node
var x = document.getElementById("MKN").attributes.length;
// Menampilkan angka dari node
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Baca Juga:
Contoh:
Tombol Elemen Atribut:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Atribut DOM pada HTML
</title>
</head>
<body>
<h2>
Properti Atribut DOM pada HTML
</h2>
<button
id="MKN"
onclick="myDons()">
Klik Disini!
</button>
<br>
<br>
<span>
Tombol Elemen Atribut:
</span>
<span id="sudo"></span>
<script>
function myDons()
{
// Mengembalikan angka dari
// node
var mkn =
document.getElementById("MKN").attributes.length;
// Menampilkan angka dari node
document.getElementById("sudo").innerHTML = mkn;
}
</script>
</body>
</html>
Output:
Properti Atribut DOM pada HTML
Tombol Elemen Atribut:
Atribut properti dalam model objek dokumen atau yang sering disebut dengan DOM HTML adalah elemen-elemen yang sangat penting dalam pengelolaan struktur halaman web. Atribut-atribut ini berfungsi untuk mengatur berbagai elemen dalam halaman tersebut, seperti tampilan, interaksi, dan pengaturan elemen-elemen lain yang ada. Dalam artikel ini, akan dibahas berbagai atribut properti tersebut serta fungsinya, dengan menjelaskan bagaimana masing-masing dapat berkontribusi terhadap pengelolaan dan pemrograman halaman web.
Model objek dokumen adalah sebuah antarmuka pemrograman aplikasi yang memungkinkan pemrogram untuk berinteraksi dengan halaman web. Melalui DOM HTML, setiap elemen yang ada dalam halaman web diperlakukan sebagai objek yang dapat dimanipulasi dengan cara tertentu. Atribut dalam konteks ini adalah properti yang terikat pada elemen-elemen tersebut, yang dapat berfungsi untuk mengatur perilaku dan penampilan elemen di halaman web.
Salah satu atribut yang sering digunakan dalam elemen HTML adalah atribut id. Atribut ini berfungsi untuk memberikan identifikasi unik terhadap sebuah elemen. Setiap elemen yang memiliki atribut id harus memiliki nilai yang berbeda, karena nilai id digunakan untuk mengidentifikasi elemen secara spesifik. Hal ini sangat penting ketika ingin memanipulasi elemen tertentu melalui skrip atau mengaitkannya dengan gaya tertentu menggunakan gaya halaman web.
Selain id, atribut class juga merupakan atribut yang sangat sering digunakan. Atribut class memungkinkan satu atau lebih elemen untuk digolongkan dalam kategori yang sama. Atribut ini sangat berguna ketika ingin memberikan gaya atau melakukan manipulasi elemen yang memiliki kesamaan dalam kategori tertentu. Dengan menggunakan class, pemrogram dapat mengelompokkan elemen-elemen yang memiliki karakteristik serupa tanpa perlu memberikan identifikasi yang unik untuk masing-masing elemen.
Atribut style juga berperan penting dalam menentukan tampilan elemen-elemen HTML. Atribut ini digunakan untuk menyematkan gaya langsung pada elemen. Dengan menggunakan atribut style, pemrogram dapat mengubah tampilan elemen seperti warna latar belakang, ukuran font, dan lain sebagainya, tanpa harus menulis aturan gaya terpisah dalam dokumen gaya halaman. Meskipun demikian, penggunaan atribut style terbatas pada pengaturan gaya individual elemen tertentu dan lebih disarankan untuk menggunakan dokumen gaya eksternal agar pengelolaan gaya lebih efisien dan terorganisir.
Atribut src digunakan pada elemen yang membutuhkan referensi ke sumber daya eksternal, seperti gambar atau video. Dengan menggunakan atribut ini, elemen HTML dapat mengambil data dari sumber eksternal dan menampilkannya dalam halaman. Atribut ini tidak hanya terbatas pada gambar, tetapi juga dapat digunakan pada elemen lain seperti audio atau video, dimana sumber daya eksternal digunakan untuk mengisi konten elemen tersebut. Atribut src sangat penting dalam memastikan bahwa halaman web dapat menampilkan media yang tepat sesuai dengan sumber yang ditentukan.
Atribut href sering ditemukan pada elemen tautan. Atribut ini memberikan informasi kepada elemen tautan tentang alamat tujuan yang ingin dituju ketika tautan tersebut diklik. Atribut href tidak hanya digunakan pada elemen tautan dalam bentuk teks, tetapi juga pada elemen-elemen lain yang berfungsi untuk mengarahkan pengguna ke sumber daya lain. Dengan menggunakan href, pemrogram dapat menghubungkan satu halaman dengan halaman lainnya, baik di dalam situs yang sama maupun di luar situs tersebut.
Atribut alt berfungsi untuk memberikan deskripsi alternatif pada elemen gambar. Atribut ini sangat penting untuk aksesibilitas, karena memungkinkan pembaca layar atau teknologi pembantu lainnya untuk memberikan penjelasan mengenai gambar kepada pengguna dengan kebutuhan khusus. Meskipun gambar tidak dapat dibaca oleh pembaca layar, atribut alt memberikan deskripsi yang dapat membantu pengguna memahami informasi yang terkandung dalam gambar tersebut.
Atribut title memberikan informasi tambahan pada elemen tertentu ketika kursor diarahkan pada elemen tersebut. Sebagai contoh, jika pengguna mengarahkan kursor ke gambar atau tautan, atribut title akan menampilkan informasi yang berguna mengenai elemen tersebut. Atribut ini tidak bersifat wajib, tetapi dapat sangat membantu dalam meningkatkan pengalaman pengguna dengan menyediakan informasi lebih lanjut mengenai elemen yang bersangkutan.
Atribut value digunakan untuk menyimpan nilai yang berhubungan dengan elemen formulir, seperti input atau area pilihan. Atribut ini sangat berguna ketika pengguna mengisi formulir pada halaman web. Nilai yang diinputkan oleh pengguna dapat disimpan dalam atribut value, yang nantinya dapat digunakan untuk memproses data lebih lanjut, misalnya mengirimkan data melalui formulir atau menampilkan nilai yang dipilih pengguna.
Atribut disabled digunakan untuk menonaktifkan elemen, sehingga pengguna tidak dapat berinteraksi dengannya. Atribut ini sering digunakan pada elemen formulir seperti tombol atau pilihan, ketika kondisi tertentu tidak memungkinkan elemen tersebut untuk digunakan. Misalnya, tombol kirim dapat dinonaktifkan jika data yang dimasukkan pengguna tidak lengkap atau tidak valid. Atribut disabled memastikan bahwa elemen tersebut tidak dapat diakses hingga kondisi yang sesuai terpenuhi.
Atribut readonly sering digunakan dalam elemen formulir untuk memastikan bahwa nilai dalam elemen tersebut hanya dapat dilihat dan tidak dapat diubah oleh pengguna. Atribut ini sangat berguna ketika ada kebutuhan untuk menampilkan data yang tidak boleh diubah oleh pengguna, tetapi tetap ingin memberikan informasi tersebut dalam elemen formulir seperti kolom input teks.
Atribut type digunakan untuk menentukan jenis elemen dalam formulir, seperti jenis input yang diterima. Sebagai contoh, atribut type dapat digunakan untuk menentukan apakah input tersebut berupa teks, angka, atau tanggal. Dengan atribut ini, elemen input dapat dikonfigurasi agar menerima data dengan format yang sesuai, memudahkan pengguna dalam mengisi formulir dengan data yang tepat.
Atribut lang digunakan untuk menentukan bahasa yang digunakan dalam elemen HTML. Dengan atribut ini, pemrogram dapat menandai bagian-bagian tertentu dalam halaman web yang ditulis dalam bahasa tertentu. Hal ini sangat berguna untuk memastikan bahwa halaman web dapat diakses dan dipahami oleh pengguna dari berbagai latar belakang bahasa, serta mempermudah mesin pencari untuk memberikan hasil yang lebih relevan.
Atribut tabindex memberikan urutan fokus pada elemen-elemen dalam formulir atau halaman web. Atribut ini mengatur urutan tabulasi, yaitu urutan elemen yang akan difokuskan ketika pengguna menekan tombol tab pada keyboard. Dengan menggunakan atribut tabindex, pemrogram dapat mengontrol urutan interaksi pengguna dengan elemen-elemen dalam halaman web, memastikan pengalaman navigasi yang lebih baik dan efisien.
Atribut data-* adalah atribut yang dapat digunakan untuk menyimpan informasi khusus pada elemen HTML tanpa mengganggu struktur elemen itu sendiri. Atribut ini memungkinkan pemrogram untuk menyimpan data tambahan yang dapat digunakan oleh skrip untuk memanipulasi elemen-elemen tersebut. Atribut data-* memberikan fleksibilitas bagi pemrogram untuk menambahkan informasi khusus pada elemen tanpa mengubah fungsionalitas atau penampilannya.
Dengan banyaknya atribut yang dapat digunakan pada elemen-elemen HTML, dapat dilihat bahwa DOM HTML memberikan berbagai macam cara untuk mengatur tampilan, perilaku, dan interaksi pada halaman web. Atribut-atribut ini sangat penting dalam membangun pengalaman pengguna yang interaktif dan dinamis. Pemahaman yang baik tentang fungsi dan penggunaan atribut-atribut ini dapat membantu pemrogram dalam menciptakan halaman web yang lebih terstruktur dan mudah diakses oleh pengguna dari berbagai perangkat dan platform.
Referensi Tambahan:
- 3 Contoh Penggunaan Properti classList DOM pada HTML
- 3 Contoh Penggunaan Properti className DOM pada HTML
- Cara Penggunaan Method click() DOM pada HTML
- Cara Penggunaan Properti clientHeight DOM pada HTML
- Cara Penggunaan Properti clientLeft DOM pada HTML
- Cara Penggunaan Properti clientTop DOM pada HTML
- Cara Penggunaan Properti clientWidth DOM pada HTML
Artikel ini akan dibaca oleh: Dian Novita Wulansari, Didan Asri Majid, Dika Aryadi, Dimas Alrico, dan Dina Dwi Ningrum.
6 komentar untuk "Atribut Properti DOM HTML dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan atribut properti DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan atribut properti DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan atribut pada DOM HTML?
BalasHapusAtribut merupakan informasi tambahan yang dapat dimasukkan ke dalam HTML untuk menginisialisasi properti DOM tertentu. Properti tersebut terbentuk ketika browser memparsing HTML dan menghasilkan DOM. Setiap elemen dalam DOM memiliki kumpulan propertinya sendiri yang semuanya diatur oleh browser.
HapusApa perbedaan antara properti dan atribut pada DOM HTML?
BalasHapusAtribut didefinisikan oleh HTML, sedangkan properti didefinisikan oleh DOM. Peran utama atribut adalah untuk menginisialisasi properti DOM. Jadi setelah proses inisialisasi DOM selesai, maka pekerjaan dari atributpun selesai.
Hapus