JavaScript ile Html DOM öğelerine erişebilir ve bu öğeler üzerinde bazı manipülasyonları gerçekleştirebiliriz. İsterseniz bu manipülasyonların neler olduğunu biraz daha detaylandıralım. Örneğin;
⇒ Sayfadaki tüm Html öğelerini (div, a, p vb.) veya bu öğelerin içeriğini değiştirebiliriz.
⇒ Sayfadaki tüm Html özelliklerini (id, class, href, target, title vb.) değiştirebiliriz.
⇒ Sayfadaki tüm Css stillerini değiştirebiliriz.
⇒ Sayfadaki mevcut Html öğelerini ve özelliklerini kaldırabiliriz.
⇒ Sayfaya yeni Html öğeleri ve özellikleri ekleyebiliriz.
⇒ Sayfada, yeni olaylar (fare ile tıklama, fare ile üzerine gelme vb.) tanımlayabiliriz.
Yukarıda yazmış olduğum manipülasyonları gerçekleştirebilmek için öncelikle ilgili Html öğesini seçmemiz gerekiyor. Bunun için bazı JavaScript fonksiyonları bulunuyor. Bu yazımda şu 2 fonksiyonun kullanımını inceleyeceğiz:
- querySelector()
- querySelectorAll()
Diğer JavaScript Html DOM erişim fonksiyonları için JavaScript Html DOM Erişim Yöntemleri – 1 yazımı okuyabilirsiniz.
İki fonksiyonu da aynı Html kodları üzerinden anlatacağım. Aşağıdaki gibi Html kodlarımız olsun.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li id="bmw">BMW</li> <li id="audi" class="cars">Audi</li> <li id="ford">Ford</li> <li id="toyota" class="cars">Toyota</li> <li id="honda">Honda</li> <li id="hyundai" class="cars">Hyundai</li> </ul> |
Bu Html öğelerine birkaç basit Css özelliği uygulayalım.
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> ul { margin: 0; padding: 0; list-style: none; } ul li { padding: 15px; background-color: aliceblue; border: 1px solid blue; } </style> |
Kodlarımızın Tarayıcıdaki Görüntüsü
Artık bu kodlar üzerinden JavaScript Html DOM erişim fonksiyonlarına geçelim.
JavaScript querySelector() Kullanımı
İlk olarak document nesnesini yazıp daha sonra querySelector fonksiyonuna erişiyoruz.
Sonrasında querySelector fonksiyonunun içerisinde, tıpkı Css seçicilerinde olduğu gibi istediğimiz Html öğelerine erişebiliriz.
⇒ Eğer id’ye göre bir seçim yapmak istiyorsak öncesinde diyez (#) işaretini kullanmalıyız.
- document.querySelector(“#id”);
Bu şekilde belirtmiş olduğumuz id’ye sahip Html öğesini seçmiş oluruz.
Örnek :
|
1 2 3 4 5 6 7 8 9 |
<script> let item = document.querySelector("#toyota"); item.style.backgroundColor = "cornflowerblue"; </script> |
Kodlarımızın Tarayıcıdaki Görüntüsü
⇒ Eğer class’a göre bir seçim yapmak istiyorsak öncesinde nokta (.) işaretini kullanmalıyız.
- document.querySelector(“.className”);
Bu şekilde belirtmiş olduğumuz class’a sahip tüm Html öğeleri içerisinden ilk öğeyi seçmiş oluruz. Eğer bu class’a sahip tüm Html öğelerini seçmek istiyorsanız querySelectorAll fonksiyonunu kullanmalısınız.
Örnek :
|
1 2 3 4 5 6 7 8 9 |
<script> let item = document.querySelector(".cars"); item.style.backgroundColor = "cornflowerblue"; </script> |
Kodlarımızın Tarayıcıdaki Görüntüsü
⇒ Eğer Html etiketine göre bir seçim yapmak istiyorsak direk Html etiketinin ismini yazabiliriz.
- document.querySelector(“div”);
Bu şekilde sayfadaki tüm div öğeleri içerisinden ilk öğeyi seçmiş oluruz. Eğer tüm div etiketlerini seçmek istiyorsanız querySelectorAll fonksiyonunu kullanmalısınız.
Bu şekilde querySelector fonksiyonu içerisinde hangi seçiciyi yazarsanız ilgili Html öğesine erişebilirsiniz.
Önemli : Dikkat etmeniz gereken en önemli kısım, querySelector fonksiyonu ile sadece bir Html öğesine erişebiliyoruz. Birden fazla Html öğesine erişmek için querySelectorAll fonksiyonunu kullanmalısınız.
JavaScript querySelectorAll() Kullanımı
İlk olarak document nesnesini yazıp daha sonra querySelectorAll fonksiyonuna erişiyoruz.
Sonrasında querySelectorAll fonksiyonunun içerisinde, tıpkı Css seçicilerinde olduğu gibi istediğimiz Html öğelerine erişebiliriz.
Örnek :
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> let items = document.querySelectorAll(".cars"); items.forEach(item => { item.style.backgroundColor = "cornflowerblue"; }); </script> |
Kodlarımızın Tarayıcıdaki Görüntüsü
Yukarıdaki örneğimizde class’ı cars olan tüm Html öğelerine erişim sağlıyoruz. Daha sonra bu öğeleri forEach fonksiyonu ile tek tek işleme alıp arka plan rengini değiştiriyoruz.
forEach fonksiyonu hakkında daha detaylı bilgi için JavaScript forEach Kullanımı – Array.forEach() yazımı okuyabilirsiniz.
Umarım “JavaScript Html DOM Erişim Yöntemleri – 2” başlıklı yazım sizin için faydalı olmuştur.
Yeni bir yazımda görüşmek üzere.
En açıklayıcı Türkçe kaynak olmuş, tebrikler ve teşekkürler.