- etiket.innerHTML: Etiketin içini okuma ve değiştirme için kullanılır.
- etiket.attribute: Etiketin niteliğini değiştirmek için kullanılır.
- etiket.setAttribute(nitelik, değeri): Etiketin niteliğini değiştirmek için kullanılır.
- etiket.style.property: Etiketin stilini değiştirmek için kullanılır.
- etiket.classList: etiketlerin class niteliği üzerinde silme,değiştirme, ekleme, class listesini öğrenme gibi işlemleri yapmak için kullanılır.
Örnek: etiket.innerHTML kullanımı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <p id="birinci"> ilk paragraf</p> <p class="kutu">ikinci pragraf</p> <p class="kutu">üçüncü paragraf</p> <p>dördüncü paragraf</p> <script> //bir tane etiket seçtik var nesne= document.getElementById("birinci"); // etiketin içeriğini okuma alert(nesne.innerHTML); //etiketin içeriğini değiştirme nesne.innerHTML="<strong>Önemli:</strong> Etiketin içeriği değişti!!!"; </script> |
Örnek: etiket.attribute kullanımı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Futbol <input type="checkbox" id="hobi1"><br> Basketbol <input type="checkbox" id="hobi2"><br> Tenis <input type="checkbox" id="hobi3"><br> <script> //bir tane etiket seçtik var secim= document.getElementById("hobi2"); secim.checked=true; </script> |
Örnek: etiket.attribute kullanımı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <input type="text" id="kimlikno" value="1202525124"><br> Ad <input type="text" id="ad"><br> Soyad <input type="text" id="soyad"><br> <script> //bir tane etiket seçtik var secim= document.getElementById("kimlikno"); secim.disabled="disabled"; </script> |
Örnek: etiket.setAttribute(nitelik, değeri) kullanımı
örnekte seçilen nesneler üzerinde hareket etmek için forEach metodu kullanılmıştır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <style> .kirmizi{ background: red; color:#fff; } </style> <p id="birinci"> ilk paragraf</p> <p class="kutu">ikinci pragraf</p> <p class="kutu">üçüncü paragraf</p> <p>dördüncü paragraf</p> <script> //bütün kutu olan nesneleri dizi olarak seçtik var nesneler= document.querySelectorAll(".kutu"); //foreach ile dizi elemanları üzerinde okuma yapılabiliyor. nesneler.forEach(function(nesne){ nesne.setAttribute("class","kirmizi"); }); </script> |
Örnek: etiket.style.property kullanımı
Tek tek stil özelliklerini değiştirmek yada stil değerini okumak için bu özelliği kullanabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <p id="birinci"> ilk paragraf</p> <p class="kutu">ikinci pragraf</p> <p class="kutu">üçüncü paragraf</p> <p>dördüncü paragraf</p> <script> //bütün kutu olan nesneleri dizi olarak seçtik var etiket= document.getElementById("birinci"); //etiket stilini değiştirme etiket.style.color="#4bc334"; etiket.style.fontSize="36px"; etiket.style.fontStyle="italic"; //etiket stilini okuma alert(etiket.style.fontSize); </script> |
Örnek: etiket.classList kullanımı
Aşağıdaki örnekleri satır satır çalıştırın.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <p id="birinci"> ilk paragraf</p> <p class="kutu">ikinci pragraf</p> <p class="kutu">üçüncü paragraf</p> <p>dördüncü paragraf</p> <script> var etiket=document.getElementById("birinci"); etiket.classList.add("cerceve"); etiket.classList.add("kirmizi"); //gizle classı yoksa gizle class'ını ekler. etiket.classList.toggle("gizle"); //şart sağlanırsa, gizle class'ı yoksa ekler varsa çıkarır. var i=5; etiket.classList.toggle("gizle", i < 10 ); //cerceve varsa true değerini döndürür. alert(etiket.classList.contains("cerceve")); // toplu halde class ekleme ve silme yapabiliriz. div.classList.add("cerceve","kirmizi"); div.classList.remove("cerceve","kirmizi"); </script> |
