JavaScript Html DOM Erişim Yöntemleri – 2

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:

  1. querySelector()
  2. 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ı

Bu Html öğelerine birkaç basit Css özelliği uygulayalım.

Css Kodları

Kodlarımızın Tarayıcıdaki Görüntüsü

javascript-queryselector-kullanimi-1

Artık bu kodlar üzerinden JavaScript Html DOM erişim fonksiyonlarına geçelim.

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

Kodlarımızın Tarayıcıdaki Görüntüsü

javascript-queryselector-kullanimi-2

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

Kodlarımızın Tarayıcıdaki Görüntüsü

javascript-queryselector-kullanimi-3

 ⇒  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.

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

Kodlarımızın Tarayıcıdaki Görüntüsü

javascript-queryselectorall-kullanimi-1

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.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.