Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengetahui Nilai URL HTML Menggunakan Lokasi Href DOM

Properti lokasi href DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai URL lengkap dari halaman saat ini. Properti href lokasi juga dapat digunakan untuk mengatur nilai href ke website lainnya atau ke titik tujuan dari alamat email. Properti lokasi href mengembalikan sebuah string yang mengandung keseluruhan alamat URL dari suatu halaman, termasuk juga nilai protokolnya.

2 Contoh Penggunaan Properti Lokasi href DOM pada HTML
Ilustrasi Properti Lokasi href DOM HTML

Sebelum memahami lebih dalam materi tentang Mengetahui Nilai URL HTML Menggunakan Lokasi Href DOM, terlebih dahulu pelajari materi tentang: Mengetahui Lokasi Nama Host HTML Menggunakan Hostname DOM [klik], Mengatur Nama Host HTML Menggunakan Lokasi Host DOM [klik], dan Mengetahui Lokasi Link HTML Menggunakan Lokasi Hash DOM [klik].

Sintak:
  • Berfungsi untuk mengembalikan nilai properti href: location.href
  • Berfungsi untuk mengatur nilai properti href: location.href = URL

Baca Juga:

Berikut adalah ilustrasi program properti lokasi href DOM pada HTML.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Lokasi href DOM

</title>

 

<style>

h1 

{

color: green;}

 

h2 

{

font-family: Impact;}

 

body 

{

text-align: center;}

</style>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti Lokasi href DOM

</h2>

 

<p>

Untuk mengembalikan nilai 

keseluruhan dari alamat URL 

saat ini, lakukan double klik 

pada tombol "Return URL":

</p>

 

<button 

ondblclick="myhref()">

Return URL

</button>

 

<p id="href"></p>

 

<script>

function myhref() 

{

var h = location.href;

 

document.getElementById("href").innerHTML = h;

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Lokasi href DOM

Untuk mengembalikan nilai keseluruhan dari alamat URL saat ini, lakukan double klik pada tombol "Return URL":



Contoh: mengatur nilai href ke titik lain dari URL website.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Lokasi href DOM

</title>

 

<style>

h1 

{

color: green;}

 

h2 

{

font-family: Impact;}

 

body 

{

text-align: center;}

</style>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti Lokasi href DOM

</h2>

 

<p>

Untuk mengarah ke alamat 

www.penelitian.id, lakukan 

double klik pada tombol 

"Redirect":

</p>

 

<button 

ondblclick="myhref()">

Redirect

</button>

 

<script>

function myhref() 

{

location.href =

"https://www.penelitian.id/";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Lokasi href DOM

Untuk mengarah ke alaman www.penelitian.id, lakukan double klik pada tombol "Redirect":


Artikel ini didedikasikan kepada: Pingky Puteri Larasati, Putri Ayu Noor Kusumaningtyas, Putri Nilam Pambudi, Putri Vitriana, dan Qathrunnada Kamilia Firdaus.

5 komentar untuk "Mengetahui Nilai URL HTML Menggunakan Lokasi Href DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti lokasi href DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah jenis browser yang dapat digunakan untuk mengaktifkan properti lokasi href DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. Apa yang dimaksud dengan properti location.href DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti location.href DOM pada HTML digunakan untuk menetapkan atau mengembalikan nilai seluruh URL pada halaman yang digunakan saat ini.

      Hapus
    2. Properti href dari interface location merupakan stringifier yang berfungsi untuk mengembalikan USVString yang berisi nilai dari seluruh URL, dan memungkinkan untuk nilai href diperbarui.

      Hapus

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 -
- Big things start from small things -