Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

2 Contoh Penggunaan Atribut Properti DOM pada HTML
Ilustrasi Atribut DOM HTML

Sebelum memahami lebih dalam materi tentang Atribut Properti DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Membuat Node Teks HTML Menggunakan appendChild DOM [klik], Properti accessKey DOM HTML dan Fungsinya [klik], dan Membuat Dokumen HTML Menggunakan Writeln DOM [klik].

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.

Baca Juga:

Contoh:

<!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>


Contoh:

<!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:

Artikel ini didedikasikan kepada: Dian Novita Wulansari, Didan Asri Majid, Dika Aryadi, Dimas Alrico, dan Dina Dwi Ningrum.

6 komentar untuk "Atribut Properti DOM HTML dan Fungsinya"

  1. Apa yang dimaksud dengan atribut properti DOM pada HTML?

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

      Hapus
  2. Apa yang dimaksud dengan atribut pada DOM HTML?

    BalasHapus
    Balasan
    1. Atribut 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.

      Hapus
  3. Apa perbedaan antara properti dan atribut pada DOM HTML?

    BalasHapus
    Balasan
    1. Atribut 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

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 -