JavaScript Html DOM attributes Kullanımı

Bu yazımda JavaScript Html DOM özelliklerinden olan attributes kullanımını anlatacağım.

Attributes özelliği ile bir Html öğesindeki tüm niteliklere erişebiliriz. Tüm niteliklere eriştikten sonra bu niteliklerin sayısını, isimlerini veya değerlerini öğrenmek için bazı ek özelliklere ihtiyacımız var.

Attributes özelliği ile birlikte şu 3 özelliği de kullanabiliyoruz.

1 – attribute.length Özelliği : Bu özellik ile bir Html öğesinin toplam kaç niteliğe sahip olduğunu öğrenebiliriz.

Örneğin bir input etiketi tanımlayalım. Bu etikete şu nitelikleri verelim.

type
id
class
placeholder
required

Sonrasında input etiketinin toplam attribute sayısını console ekranına yazdıralım.

<input type="text" id="nameId" class="nameClass" placeholder="Lütfen isminizi giriniz" required>
<script>
let input = document.getElementById("nameId");
console.log(input.attributes.length);
</script>

let input = document.getElementById("nameId");

console.log(input.attributes.length);

</script>

Çıktısı : 5

⇒ attributes.length özelliği IE ve tüm modern tarayıcılar tarafından desteklenir.

Html öğelerine erişim metodları hakkında detaylı bilgi için şu yazılarımı okuyabilirsiniz.

JavaScript Html DOM Erişim Yöntemleri – 1

JavaScript Html DOM Erişim Yöntemleri – 2

2 – attribute.name Özelliği : Bu özellik ile bir Html öğesinin niteliklerinin isimlerini öğrenebiliriz.

Örneğin bir input etiketi tanımlayalım. Bu etikete şu nitelikleri verelim.

type
id
class
placeholder
required

Sonrasında input etiketinin tüm niteliklerine erişip isimlerini console ekranına yazdıralım.

<input type="text" id="nameId" class="nameClass" placeholder="Lütfen isminizi giriniz" required>
<script>
let input = document.getElementById("nameId");
for(i = 0; i < input.attributes.length; i++){
console.log(input.attributes[i].name);
}
</script>

let input = document.getElementById("nameId");

for(i = 0; i < input.attributes.length; i++){

console.log(input.attributes[i].name);

}

</script>

Çıktısı :

type

class

placeholder

required

⇒ attributes.name özelliği IE ve tüm modern tarayıcılar tarafından desteklenir.

3 – attribute.value Özelliği : Bu özellik ile bir Html öğesinin niteliklerinin değerlerini öğrenebiliriz.

Örneğin bir input etiketi tanımlayalım. Bu etikete şu nitelikleri verelim.

type
id
class
placeholder

Sonrasında input etiketinin tüm niteliklerine erişip değerlerini console ekranına yazdıralım.

<input type="text" id="nameId" class="nameClass" placeholder="Lütfen isminizi giriniz">
<script>
let input = document.getElementById("nameId");
for(i = 0; i < input.attributes.length; i++){
console.log(input.attributes[i].value);
}
</script>

let input = document.getElementById("nameId");

for(i = 0; i < input.attributes.length; i++){

console.log(input.attributes[i].value);

}

</script>

Çıktısı :

text

nameId

nameClass

Lütfen isminizi giriniz

⇒ attributes.value özelliği IE ve tüm modern tarayıcılar tarafından desteklenir.

Son olarak attributes özelliği ile ilgili bir konuya daha değinmek istiyorum.

Yine bir input etiketi tanımlayalım ve aynı nitelikleri verelim.

Sonrasında attributes özelliği ile bu input’un tüm niteliklerine erişelim. Bu niteliklerin içerisinden istediğimiz bir niteliğe erişmek için niteliğin adını kullanabildiğimiz gibi niteliğin index numarasını da kullanabiliriz.

<input type="text" id="nameId" class="nameClass" placeholder="Lütfen isminizi giriniz" required>
<script>
let input = document.getElementById("nameId");
console.log(input.attributes["class"].value);
console.log(input.attributes[2].value);
</script>

let input = document.getElementById("nameId");

console.log(input.attributes["class"].value);

console.log(input.attributes[2].value);

</script>

Çıktısı :

nameClass

Gördüğünüz gibi nitelik adını (class) yazdığımızda da index numarasını (2) yazdığımızda da aynı sonucu alıyoruz.

Umarım “JavaScript Html DOM attributes Kullanımı” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

Tüm Html Nitelikleri ve Kullanılabildikleri Html Etiketleri

Yeni bir yazımda görüşmek üzere.

JavaScript Html DOM attributes Kullanımı

Yazar Hakkında

Yorum Yazın

Benzer Yazılar

Yazar Hakkında

Yorum Yazın