Odak modu
JavaScript’de çoğu zaman HTML elementlerine JavaScript ile müdahale ederiz. Bazen doğrudan bir elemente ulaşmaya çalışıyorken bazen spesifik bir liste öğesine ulaşmamız gerekebilir. Bu başlık altında ise liste öğesine erişmenin farklı yollarını deneyip en sonda ise listemize yeni bir öğe ekleyeceğiz.
Açtığım HTML dosyamın body elementinin içerisine aşağıdaki kodları ekliyorum.
<ul class="liste">
<li id="walterwhite">Walter White</li>
<li class="alternate">Jesse Pinkman</li>
<li>Skyler White</li>
<li class="alternate">Hank Schrader</li>
<li>Gustavo Fring</l>
</ul>
İlgili listemizi oluşturduk ve bazı class, id tanımlamaları yaptık.
id
teknik olarak ise document.getElementById
ile öğeye erişmek.var one = document.getElementById("walterwhite");
Yukarıda önce bir değişken tanımlayıp sonrasında ise walterwhite
id değerine sahip elementi seçtik.
Sayfamızda eğer ki bu id’ye sahip bir element var ise bize o elementi döndürür.
class
teknik anlamda ise getElementsByClassName
ile öğe ve öğelere erişmekvar two = document.getElementsByClassName("alternate");
Burada ise two
isminde bir değişken tanımlayıp alternate
sınıfına sahip olan tüm öğeleri alıyoruz. Burada önemli nokta ise getElementsByClassName
bize class’a sahip tüm öğeleri nodeList olarak döndürür.
two
olarak tanımladığımız değişkenimizin içerisinde döngü yardımı ile dönelim ve alternate
sınıfına sahip olarak öğelerin renklerini değiştirelim. Döngü kullanmamızın bir sebebi de getElementsByClassName
metodunun bize nodeList
dönüyor olması.
for (var i = 0; i < two.length; i++) {
two[i].style.color = "red";
}
Yukarıdaki döngümüz sayesinde two
değişkenimize gidip "alternate" sınıfına sahip tüm elementleri kırmızı renk yaptık.
document.querySelector
ile öğeye erişmek.Bu öğeye erişim yönteminde ise ilgili etiketi sorguladığımızda bize sayfada eğer bu elementten birden fazla varsa sadece ilk eşleşeni getirir.
var liste = document.querySelector("ul");
Liste değişkenimizi oluşturduk ve querySelector
ile sayfadaki ilk eşleşen ul
etiketini yakaladık. Şimdi ise bu liste elementinin içine yeni bir öğe eklemeyi görelim.
Öncelikle sayfamıza 2 tane etiket ekleyeceğim. Birincisi bir input
diğeri ise bir button
. input
etiketi ile kullanıcıdan eklenecek öğe bilgisini alacağız.
<input type="text" id="veri">
<button id="ekle">Listeye Öğe Ekle</button>
Hatırlarsanız birkaç satır üstte ise "liste" etiketini seçmiştik. Onu da burada kullanacağız. Haydi şimdi input ve button öğelerimizi querySelector
ile seçelim.
var urun = document.querySelector("#veri");
var ekle = document.querySelector("#ekle");
Yukarıda seçim işlemlerimizi de yaptıktan sonra sırada ise ekle
butonuna tıklandığında ilgili ekleme durumunun gerçekleşmesini sağlamak.
ekle.addEventListener("click",function(){
// createElement ile yeni bir listItem (li) oluşturuyoruz
var li=document.createElement("li");
// Input ile gelen veriyi "li" içerisine metin olarak giriyoruz.
li.textContent=veri.value;
// appendChild ile oluşturduğumuz elementi "liste" isimli değişkenimizin içerisine ekliyoruz.
liste.appendChild(li);
// Veri inputu içerisindeki metni siliyoruz.
veri.value = "";
});
Bu şekilde ise erişim sağladığımız öğenin içerisine yeni bir öğe ekleyebildik.
Hadi aşağıda codepen ile deneyin!
Yazılım Kariyerinde İlerlemeni Hızlandıracak Programlar
Patika+ programlarımız ile 4-8 aylık yoğun yazılım kamplarına katıl, temel bilgilerden başlayarak kapsamlı bilgiler edin, yazılım kariyerine başla!
Yorum yapabilmek için derse kayıt olmalısın!