Sign in Subscribe
Javascript

Anchor Property: Rahasia di Balik Link yang Bekerja

Anchor Property: Rahasia di Balik Link yang Bekerja
Photo by Lucas Sankey / Unsplash

Pernah kepikiran nggak gimana caranya sebuah link bisa mengarahkan kita ke halaman lain? Nah, di balik itu semua, ada sesuatu yang namanya Anchor Property. Properti ini adalah bagian dari elemen <a> (alias anchor tag), yang berfungsi buat nge-handle segala sesuatu yang berhubungan sama link. Dengan Anchor Property, kita bisa tahu, ngeubah, atau bahkan memanipulasi sebuah link pakai JavaScript.

Jadi, kalau kamu sering utak-atik halaman web atau sekadar penasaran gimana cara kerja link di dunia coding, ini ilmu yang wajib kamu kuasai! Yuk, kita bahas lebih dalam.

Kenapa Anchor Property Itu Penting?

Sebelum kita ngoding, kita harus tahu dulu kenapa Anchor Property itu penting banget dalam pengembangan web:

  • Mengontrol link secara dinamis – Kamu bisa mengubah atau mengupdate link tanpa perlu edit HTML.
  • Meningkatkan interaksi pengguna – Bisa nambahin efek tertentu, seperti membuka link di tab baru atau mengganti teks link berdasarkan aksi pengguna.
  • SEO Friendly – Bisa dipakai buat nambahin atribut rel, seperti nofollow, biar search engine ngerti gimana link harus diperlakukan.

Dengan kata lain, kalau kamu bisa mainin Anchor Property, kamu bakal lebih fleksibel dalam bikin website yang dinamis dan interaktif.

Properti Utama dalam Anchor Property

Ada beberapa properti penting dalam Anchor Property yang bakal sering banget kamu gunakan. Yuk, kita bedah satu per satu!

href adalah properti utama yang menentukan ke mana link akan membawa pengguna. Misalnya:

<a id="myLink" href="https://example.com">Klik Aku!</a>

Buat ngecek atau ganti href pakai JavaScript, gampang banget:

const link = document.getElementById("myLink");
console.log(link.href); // Output: https://example.com

// Ubah URL tujuan
link.href = "https://google.com";
console.log(link.href); // Output: https://google.com

Gampang, kan? Dengan cara ini, kamu bisa bikin halaman yang lebih interaktif, misalnya mengganti link secara otomatis sesuai dengan kondisi tertentu.

Kalau kamu pernah klik link yang langsung kebuka di tab baru, itu karena ada atribut target. Nih, contoh penggunaannya:

const link = document.getElementById("myLink");
link.target = "_blank"; // Link bakal kebuka di tab baru

Ada beberapa pilihan target yang bisa dipakai:

  • _self → Link dibuka di tab yang sama (default).
  • _blank → Link dibuka di tab baru.
  • _parent → Buat iframe, ini bakal buka link di parent frame.
  • _top → Mengabaikan semua frame dan buka di jendela penuh.

Nah, ini berguna banget buat UX (User Experience), misalnya kamu mau pastikan user tetap di halaman utama tapi tetap bisa akses link di tab baru.

3. text – Ubah Teks dalam Link Secara Dinamis

Kadang kita perlu mengubah teks dalam link berdasarkan aksi pengguna, misalnya setelah tombol diklik, teks link berubah.

const link = document.getElementById("myLink");
link.textContent = "Kunjungi Google!";

Jadi, teks dalam <a> yang tadinya "Klik Aku!" akan berubah jadi "Kunjungi Google!" setelah kode ini dieksekusi.

Kadang kita nggak cuma butuh tahu linknya ke mana, tapi juga informasi detailnya, seperti domain, protocol, atau path dari URL tersebut. Untungnya, ada properti-properti keren seperti ini:

const link = document.createElement("a");
link.href = "https://www.example.com:8080/path/page.html?query=123#section";

console.log(link.protocol); // https:
console.log(link.hostname); // www.example.com
console.log(link.port); // 8080
console.log(link.pathname); // /path/page.html
console.log(link.search); // ?query=123
console.log(link.hash); // #section

Properti ini berguna kalau kamu mau parsing URL, misalnya buat tracking user behavior atau buat filtering link yang boleh diklik di website.

Atribut rel sering dipakai buat SEO dan keamanan. Contoh penggunaannya:

const link = document.getElementById("myLink");
link.rel = "noopener noreferrer";

Beberapa nilai rel yang umum dipakai:

  • noopener → Mencegah halaman yang dibuka mengakses halaman sebelumnya (keamanan tambahan).
  • noreferrer → Mencegah pengiriman referer saat pengguna klik link.
  • nofollow → Memberitahu Google untuk tidak mengikuti link ini.

Kombinasi rel="noopener noreferrer" sangat disarankan kalau kamu membuka link di tab baru (_blank) untuk menghindari potensi serangan keamanan seperti tabnabbing.

Perbandingan Anchor Property vs setAttribute()

Banyak cara untuk mengubah properti dalam elemen <a>. Salah satu alternatif selain Anchor Property adalah menggunakan setAttribute(). Tapi mana yang lebih baik?

Metode Keuntungan
Anchor Property Lebih cepat dan lebih readable
setAttribute() Bisa dipakai untuk semua atribut, bukan hanya yang tersedia di properti DOM

Contoh perbedaan:

link.href = "https://google.com"; // Cara cepat
link.setAttribute("href", "https://google.com"); // Cara fleksibel

Kalau cuma mau ubah href, pakai Anchor Property aja biar lebih simpel.

Kesimpulan

  • Anchor Property bikin kita bisa nge-handle elemen <a> dengan lebih mudah dan fleksibel.
  • Properti utama yang sering dipakai: href, target, text, rel, hostname, pathname, protocol, dll.
  • Bisa digunakan buat bikin UX lebih baik, kontrol keamanan link, dan parsing URL.
  • Dibanding setAttribute(), pakai Anchor Property lebih cepat dan lebih clean.

Jadi, kalau kamu mau bikin halaman web yang lebih interaktif dan fleksibel, pastikan kamu paham dan bisa mainin Anchor Property ini dengan luwes!

Read next