Bu yazımda JavaScript Html DOM metodlarından olan getAttribute() ve setAttribute() metodlarının ne işe yaradıklarını ve nasıl kullanıldıklarını anlatacağım.
Html DOM getAttribute() Metodu
getAttribute() metodu ile bir Html öğesinin bir niteliğinin değerini alabiliriz. Örneğin bir input etiketi tanımlayalım ve bu etikete şu nitelikleri verelim.
- type
- id
- class
Sonrasında getAttribute() metodu ile type ve class niteliklerin değerlerini console ekranına yazdıralım.
|
1 2 3 4 5 6 7 8 9 |
<input type="text" id="nameId" class="nameClass"> <script> let input = document.getElementById("nameId"); console.log(input.getAttribute("type")); console.log(input.getAttribute("class")); </script> |
Çıktısı :
text
nameClass
Gördüğünüz gibi getAttribute() metodu, içerisine yazdığımız niteliğin ismine göre bize o niteliğin değerini veriyor.
⇒ getAttribute() metodu 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
Html DOM setAttribute() Metodu
setAttribute() metodu ile bir Html öğesine yeni bir nitelik ekleyebilir ve bu niteliğe istediğimiz değeri verebiliriz. Örneğin bir a etiketi tanımlayalım ve setAttribute() metodu ile a etiketinin href niteliğine bir değer atayalım.
Sonrasında a etiketini console ekranına yazdıralım.
|
1 2 3 4 5 6 7 8 9 10 |
<a id="googleLink">Google</a> <script> let aTag = document.getElementById("googleLink"); aTag.setAttribute("href","https://www.google.com"); console.log(aTag); </script> |
Çıktısı : <a id=”googleLink” href=”https://www.google.com”>Google</a>
Gördüğünüz gibi setAttribute() metodu ile a etiketine href niteliği ekledik ve bu niteliğe “https://www.google.com” değerini atadık.
⇒ setAttribute() metodu IE ve tüm modern tarayıcılar tarafından desteklenir.
Umarım “JavaScript Html DOM getAttribute(), setAttribute() Metodları ve Kullanımları” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
JavaScript Html DOM attributes Kullanımı
Yeni bir yazımda görüşmek üzere.
, setAttribute() Metodları ve Kullanımları){kind=link}