JavaScript Html DOM Erişim Yöntemleri – 1

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.

  1. getElementById()
  2. getElementsByClassName()
  3. getElementsByName()
  4. getElementsByTagName()

Diğer JavaScript Html DOM erişim fonksiyonları için JavaScript Html DOM Erişim Yöntemleri – 2 yazımı okuyabilirsiniz.

 ⇒  getElementById ve getElementsByClassName fonksiyonlarını aşağıdaki Html kodları üzerinden anlatacağım.

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-html-dom-erisim-yontemleri-fonksiyonlari-1

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

JavaScript getElementById() Kullanımı

İlk olarak document nesnesini yazıp daha sonra getElementById fonksiyonuna erişiyoruz.

Sonrasında getElementById fonksiyonunun içerisinde, istediğimiz id’ye sahip Html öğesini seçebiliriz.

  • document.getElementById(“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-getelementbyid-kullanimi

İlk olarak document nesnesini yazıp daha sonra getElementsByClassName fonksiyonuna erişiyoruz.

Sonrasında getElementsByClassName fonksiyonunun içerisinde, istediğimiz class’a sahip Html öğelerini seçebiliriz.

  • document.getElementsByClassName (“className”);

Bu şekilde belirtmiş olduğumuz class’a sahip Html öğelerini seçmiş oluruz.

 Örnek :  

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

javascript-getelementsbyclassname-kullanimi

Yukarıdaki örneğimizde class’ı cars olan tüm Html öğelerine erişim sağlıyoruz. Daha sonra bu öğeleri for döngüsü ile tek tek işleme alıp arka plan rengini değiştiriyoruz.

JavaScript for kullanımı ile ilgili detaylı bilgi için JavaScript for Döngüsü (for, for/in, for/of) yazımı okuyabilirsiniz.

 ⇒  getElementsByName ve getElementsByTagName fonksiyonlarını aşağıdaki Html kodları üzerinden anlatacağım.

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-html-dom-erisim-yontemleri-fonksiyonlari-2

İlk olarak document nesnesini yazıp daha sonra getElementsByName fonksiyonuna erişiyoruz.

Sonrasında getElementsByName fonksiyonunun içerisinde, istediğimiz name değerine sahip Html öğelerini seçebiliriz.

  • document.getElementsByName (“name”);

Bu şekilde belirtmiş olduğumuz name değerine sahip Html öğelerini seçmiş oluruz.

 Örnek :  

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

javascript-getelementsbyname-kullanimi

Yukarıdaki örneğimizde name attribute’unun değeri divName olan tüm Html öğelerine erişim sağlıyoruz. Daha sonra bu öğeleri for döngüsü ile tek tek işleme alıp arka plan rengini değiştiriyoruz.

JavaScript getElementsByTagName() Kullanımı

İlk olarak document nesnesini yazıp daha sonra getElementsByTagName fonksiyonuna erişiyoruz.

Sonrasında getElementsByTagName fonksiyonunun içerisinde, istediğimiz Html etiketinin ismini yazıp o isimdeki Html öğelerini seçebiliriz.

  • document.getElementsByTagName (“tagName”);

Bu şekilde belirtmiş olduğumuz etiket ismine sahip tüm Html öğelerini seçmiş oluruz.

 Örnek :  

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

javascript-getelementsbytagname-kullanimi

Yukarıdaki örneğimizde tüm button öğelerine erişim sağlıyoruz. Daha sonra bu öğeleri for döngüsü ile tek tek işleme alıp arka plan rengini değiştiriyoruz.

Umarım “JavaScript Html DOM Erişim Yöntemleri – 1” 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.