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 4 fonksiyonun kullanımını inceleyeceğiz:
- getElementById()
- getElementsByClassName()
- getElementsByName()
- 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ı
|
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 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 :
|
1 2 3 4 5 6 7 8 9 |
<script> let item = document.getElementById("toyota"); item.style.backgroundColor = "cornflowerblue"; </script> |
Kodlarımızın Tarayıcıdaki Görüntüsü
JavaScript getElementsByClassName() Kullanımı
İ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 :
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> let items = document.getElementsByClassName("cars"); for(i = 0; i < items.length; i++){ items[i].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 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ı
|
1 2 3 4 5 6 7 |
<div name="divName">div-1</div> <div>div-2</div> <div name="divName">div-3</div> <button>button-1</button> <button>button-1</button> |
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 18 |
<style> div { width: 150px; height: 150px; border: 1px solid; text-align: center; line-height: 150px; float: left; margin-right: 20px; } button { height: 150px; width: 120px; } </style> |
Kodlarımızın Tarayıcıdaki Görüntüsü
JavaScript getElementsByName() Kullanımı
İ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 :
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> let items = document.getElementsByName("divName"); for (i = 0; i < items.length; i++) { items[i].style.backgroundColor = "cornflowerblue"; } </script> |
Kodlarımızın Tarayıcıdaki Görüntüsü
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 :
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> let items = document.getElementsByTagName("button"); for (i = 0; i < items.length; i++) { items[i].style.backgroundColor = "cornflowerblue"; } </script> |
Kodlarımızın Tarayıcıdaki Görüntüsü
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.
