Properti images collection pada HTML digunakan untuk mengembalikan koleksi dari elemen <img> pada dokumen HTML. Properti ini dapat digunakan untuk mengetahui jumlah gambar yang dimasukkan pada dokumen yang menggunakan tag <img>. Namun, Elemen <input> dengan type = image tidak dihitung pada properti image.

Sebelum memahami lebih dalam materi tentang Menggunakan Image Collection DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Menggunakan Properti Head HTML DOM dan Fungsinya, Memeriksa Fokus HTML Menggunakan hasFocus DOM, dan Mendapatkan Nama Tag HTML Menggunakan getElementsByTagName DOM.

Sintak: document.images

Properti: Berfungsi untuk mengembalikan angka dari elemen <img> dalam suatu koleksi.

Method: DOM image collection mengandung tiga method yang diperlihatkan sebagai berikut.

[index]: Digunakan untuk mengembalikan elemen dari indeks yang dipilih. Nilai indeks dimulai dari angka 0, dan akan mengembalikan NULL jika nilai indeks berada diluar dari jangkauan.
item(index): Digunakan untuk mengembalikan elemen <img> dari indeks yang diseleksi. Nilai indeks dimulai dengan angka 0, dan akan mengembalikan nilai NULL jika nilai indeks berada di luar dari jangkauan.
namedItem(id): Digunakan untuk mengembalikan elemen <img> dari koleksi sesuai dengan atribut id yang diberikan, dan akan mengembalikan nilai NULL jika nilai id tidak valid.

Return Values: Object HTMLCollection merepresentasikan semua elemen <img> yang terdapat pada dokumen HTML, dimana elemen pada koleksi tersebut akan diurutkan sesuai dengan urutan kemunculannya pada source code.

Contoh: Penggunaan properti length untuk mengembalikan nilai angka dari elemen <img> yang terdapat pada koleksi. Berikut adalah properti program ilustrasi properti document.image pada HTML.

<!DOCTYPE html>

<html>

<head>

<title>

Properti document.image() DOM

</title>

<style>

{

color: green;}

{

font-family: Impact;}

body

{

text-align: center;}

</style>

</head>

<body>

<h1>

Blog Elfan

</h1>

<h2>

Properti document.image DOM

</h2>

<img

src="home.png"

alt="home"

width="150"

height="150">

<img

src="internships.png"

alt="magang"

width="150"

height="150">

<img

src="coding.png"

alt="praktik coding"

width="150"

height="150">

<p>

Untuk menampilkan jumlah

gambar yang dihitung, double

klik pada tombol "View Image

Count":

</p>

View Image Count

</button>

function myImage()

{

var i = document.images.length;

document.getElementById("image").innerHTML = i;

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti document.image DOM

Untuk menampilkan jumlah gambar yang dihitung, double klik pada tombol "View Image Count":

Contoh: Penggunaan properti URL untuk mengembalikan URL dari elemen <img> pertama dalam suatu koleksi.

<!DOCTYPE html>

<html>

<head>

<title>

Properti document.image() DOM

</title>

<style>

{

color: green;}

{

font-family: Impact;}

body

{

text-align: center;}

</style>

</head>

<body>

<h1>

Blog Elfan

</h1>

<h2>

Properti document.image DOM

</h2>

<img

src="home.png"

alt="home"

width="150"

height="150">

<img

src="internships.png"

alt="magang"

width="150"

height="150">

<img

src="coding.png"

alt="praktik coding"

width="150"

height="150">

<p>

Untuk menampilkan URL dari

gambar pertama, double klik

pada tombol "View Image URL":

</p>

View Image URL

</button>

function myImage()

{

var i = document.images[0].src;

document.getElementById("image").innerHTML = i;

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti document.image DOM

Untuk menampilkan URL dari gambar pertama, double klik pada tombol "View Image URL":

Contoh: Penggunaan properti nameditem untuk mengembalikan URL dari elemen <img> pada suatu koleksi.

<!DOCTYPE html>

<html>

<head>

<title>

Properti document.image() DOM

</title>

<style>

{

color: green;}

{

font-family: Impact;}

body

{

text-align: center;}

</style>

</head>

<body>

<h1>

Blog Elfan

</h1>

<h2>

Properti document.image DOM

</h2>

<img

src="home.png"

alt="home"

width="150"

height="150">

<img

src="internships.png"

alt="magang"

width="150"

height="150">

<img

id="coding.png"

src="coding.png"

width="150"

height="150"

alt="praktik coding">

<p>

Untuk menampilkan URL dari

gambar yang memiliki id

id="coding.png", double klik

pada tombol "View Image URL":

</p>

View Image URL

</button>

function myImage()

{

var i = document.images.namedItem("coding.png").src;

document.getElementById("image").innerHTML = i;

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti document.image DOM

Untuk menampilkan URL dari gambar yang memiliki id id="coding.png", double klik pada tombol "View Image URL":

Baca Juga:

Koleksi gambar pada dokumen HTML merupakan salah satu elemen penting dalam pengelolaan gambar pada halaman web. Konsep ini merujuk pada struktur pengumpulan elemen gambar yang ada pada halaman web dan memungkinkan pengaksesan serta manipulasi gambar-gambar tersebut menggunakan berbagai cara melalui Document Object Model (DOM). Koleksi gambar ini merupakan objek yang menyediakan daftar atau array dari elemen gambar yang terdapat pada sebuah halaman web, yang bisa berupa tag gambar atau elemen lain yang bertindak sebagai gambar.

Dalam konteks penggunaan DOM, koleksi gambar ini adalah cara yang efektif untuk mengelola banyak gambar sekaligus. Biasanya, gambar-gambar ini diakses melalui elemen gambar HTML yang umumnya menggunakan tag gambar, yang berfungsi untuk menampilkan gambar pada halaman web. Setiap gambar dalam koleksi ini bisa diakses dengan menggunakan berbagai metode yang disediakan oleh DOM, yang memberikan fleksibilitas dalam manipulasi elemen-elemen gambar tersebut.

Salah satu keuntungan utama menggunakan koleksi gambar ini adalah kemampuannya untuk memudahkan akses dan manipulasi gambar secara lebih efisien. Mengingat bahwa halaman web sering kali memiliki banyak elemen gambar, mengelola gambar-gambar tersebut secara manual bisa menjadi tugas yang sangat merepotkan dan memakan waktu. Dengan menggunakan koleksi gambar, setiap gambar pada halaman web dapat diakses secara sistematis dan lebih mudah. Koleksi ini dapat diakses menggunakan properti pada objek dokumen, yang memungkinkan pengembang untuk berinteraksi dengan gambar yang ada dalam halaman secara langsung.

Koleksi gambar pada DOM HTML juga memungkinkan untuk melakukan perubahan pada gambar-gambar tersebut secara dinamis. Misalnya, pengembang dapat mengubah atribut gambar, seperti sumber gambar, ukuran, atau bahkan gaya visual seperti lebar dan tinggi gambar. Hal ini memberi kebebasan lebih dalam mengelola gambar-gambar dalam sebuah situs web tanpa perlu memuat ulang halaman tersebut setiap kali perubahan dilakukan. Dengan cara ini, pengalaman pengguna dapat menjadi lebih interaktif dan dinamis.

Selain itu, menggunakan koleksi gambar DOM HTML juga mempermudah untuk menambahkan efek atau animasi pada gambar. Misalnya, pengembang dapat membuat transisi visual antara berbagai gambar atau memberikan efek hover pada gambar-gambar tertentu. Efek semacam ini dapat meningkatkan estetika dan daya tarik visual halaman web, memberikan pengalaman yang lebih menarik bagi pengunjung situs. Koleksi gambar memberikan pengembang kontrol penuh untuk melakukan perubahan pada banyak gambar secara bersamaan atau bahkan mengganti gambar-gambar yang ada berdasarkan kondisi tertentu.

Fungsi lainnya dari koleksi gambar dalam DOM adalah sebagai sarana untuk melakukan manipulasi batch atau pengolahan gambar secara kolektif. Pengelolaan gambar dalam jumlah besar pada sebuah halaman web dapat dilakukan dengan lebih efisien, karena pengembang dapat mengakses dan memodifikasi berbagai gambar sekaligus tanpa perlu menangani satu per satu elemen gambar tersebut. Sebagai contoh, jika ada kebutuhan untuk mengganti gambar dalam sebuah galeri atau slider gambar, koleksi gambar memungkinkan pengembang untuk melakukannya dengan lebih cepat dan efisien.

Penggunaan koleksi gambar juga membantu dalam hal pengoptimalan kinerja halaman web. Dengan mengelola gambar-gambar yang ada secara lebih terstruktur dan terorganisir melalui DOM, proses pemuatan halaman dapat dilakukan lebih cepat. Ini karena gambar-gambar tersebut dapat dimuat secara selektif, misalnya dengan teknik pemuatan gambar saat diperlukan (lazy loading). Dengan cara ini, hanya gambar-gambar yang diperlukan pada saat tertentu yang akan dimuat, yang dapat mengurangi beban jaringan dan meningkatkan kecepatan pemuatan halaman.

Penting untuk diingat bahwa koleksi gambar pada DOM hanya mencakup gambar-gambar yang ada di dalam elemen gambar yang langsung terhubung dengan halaman web. Jika gambar tersebut dimuat atau dipanggil melalui mekanisme lain, seperti melalui pemanggilan JavaScript atau pustaka eksternal, gambar tersebut tidak akan terdaftar dalam koleksi gambar ini secara otomatis. Oleh karena itu, penting untuk memastikan bahwa gambar-gambar yang dikelola menggunakan koleksi ini adalah gambar-gambar yang benar-benar terintegrasi langsung dalam struktur halaman.

Penggunaan koleksi gambar dalam pengembangan web juga memberikan keuntungan dari segi pengelolaan aksesibilitas gambar. Gambar-gambar yang ada di dalam halaman dapat diberi atribut alternatif untuk memastikan bahwa gambar dapat diakses oleh pengguna dengan berbagai kebutuhan khusus. Dengan menggunakan koleksi gambar, pengembang dapat lebih mudah menambahkan atribut alternatif ini untuk setiap gambar dalam halaman tanpa perlu menyentuh setiap elemen gambar satu per satu.

Salah satu hal yang juga perlu diperhatikan adalah penggunaan koleksi gambar dalam optimasi tampilan dan responsivitas halaman. Dalam dunia pengembangan web modern, memastikan bahwa halaman web dapat menyesuaikan diri dengan berbagai perangkat dan ukuran layar adalah hal yang sangat penting. Koleksi gambar memungkinkan pengembang untuk membuat gambar yang adaptif terhadap ukuran layar perangkat yang digunakan, memastikan tampilan gambar tetap optimal pada berbagai jenis perangkat, dari perangkat desktop hingga perangkat mobile.

Selain itu, koleksi gambar juga memungkinkan untuk memanfaatkan fitur-fitur seperti pengurutan dan pencarian dalam kumpulan gambar. Dalam hal ini, koleksi gambar dapat membantu pengembang dalam mencari dan mengatur gambar-gambar berdasarkan kriteria tertentu, seperti ukuran gambar, jenis gambar, atau bahkan urutan gambar berdasarkan waktu atau relevansi. Dengan demikian, koleksi gambar ini tidak hanya berfungsi sebagai alat untuk akses, tetapi juga sebagai alat untuk pengelolaan data gambar yang lebih kompleks.

Pengelolaan gambar yang baik dan efektif adalah elemen kunci dalam pengalaman pengguna. Pengguna yang mengakses sebuah halaman web menginginkan gambar yang terlihat jelas, tidak terdistorsi, dan dapat dimuat dengan cepat. Oleh karena itu, pengelolaan gambar melalui koleksi gambar di dalam DOM HTML tidak hanya berfungsi untuk mempermudah akses dan manipulasi, tetapi juga untuk meningkatkan kualitas pengalaman pengguna secara keseluruhan.

Penerapan koleksi gambar yang efektif dalam pengembangan halaman web dapat sangat mempengaruhi kinerja dan interaksi pengguna dengan situs. Dengan memanfaatkan fitur-fitur yang ada dalam DOM HTML untuk mengelola gambar secara terstruktur dan dinamis, pengembang dapat menciptakan halaman web yang lebih efisien, menarik, dan responsif. Hal ini dapat menghasilkan situs web yang lebih baik, lebih cepat, dan lebih mudah diakses oleh pengunjung dengan berbagai kebutuhan dan perangkat.

Secara keseluruhan, koleksi gambar dalam DOM HTML adalah alat yang sangat berguna dalam pengelolaan gambar pada halaman web. Dengan berbagai fungsinya yang mendalam, koleksi gambar memungkinkan pengembang untuk melakukan manipulasi gambar dengan lebih mudah dan efektif, memastikan tampilan gambar yang optimal, serta memberikan pengalaman pengguna yang lebih baik. Penerapan yang tepat dari koleksi gambar ini dapat membantu pengembang dalam menciptakan halaman web yang lebih dinamis, interaktif, dan responsif terhadap berbagai perangkat yang digunakan oleh pengunjung situs.

Referensi Tambahan:

Artikel ini akan dibaca oleh: Bahtiar Hendrawan Pradipta, Benaya Mahottama Sasalancana, Brian Hakim Pangestu, Cendana Sekar Kumala Yastri, dan Charesta Vida Reswara.

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Menggunakan Image Collection DOM HTML dan Fungsinya"

AnonimSabtu, 25 Desember 2021 pukul 08.36.00 WIB
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti image collection pada dom html?
BalasHapus
Balasan
AnonimSelasa, 04 Januari 2022 pukul 09.56.00 WIB
Apa yang dimaksud dengan html image collection pada dom html?
BalasHapus
Balasan

Tambahkan komentar

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 -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

Menggunakan Image Collection DOM HTML dan Fungsinya

Blog Elfan

Properti document.image DOM

Blog Elfan

Properti document.image DOM

Blog Elfan

Properti document.image DOM

5 komentar untuk "Menggunakan Image Collection DOM HTML dan Fungsinya"

Menu Halaman Statis