JAVASCRIPT’TE DOM ELEMENTLERİNİ SEÇME #14


JAVASCRIPT’TE DOM ELEMENTLERİNİ SEÇME


Javascript’te önceki derslerde bahsettiğim DOM üzerinden javascript ile elementlerimizi nasıl seçeceğimizi göstereceğim. Daha sonraki derslerde ise bu elementler üzerin de javascript ile nasıl işlemler yapacağımızı göreceğiz. Ben bu elementleri 13. derste bahsettiğim todo-list projesinde kullanılacak olan html sayfası üzerinden seçeceğim. Hala editörünüzde eklemediyseniz bu html kodlarını javascript dosyanızı bağladığınız html dosyası üzerine yapıştırınız. Şimdi bu elementleri neden seçtiğimize bir bakalım.

JAVASCRIPT’TE NEDEN BU ELEMENTLERİ SEÇERİZ ?


Bildiğiniz gibi javascript statik web sayfalarını dinamikleştirme özelliğine sahiptir ve bunun için kullanılır. Fakat elinde hiç bir html elementi olmadan javascript’in dinamikliğini buralara katamazsınız. Bu yüzden bu elementleri önce seçip sonra javascript kodlarını bu elementler üzerinde kullanacağız. Peki ne gibi özellikler ekleyebiliriz ? Mesela bir butona tıklandığında daha öncelerden görmüş olduğumuz alert pop-up ‘ı çıkarma. Kullanıcıdan prompt ile veriler alıp bunları html elementleri içine yazdırma gibi şeyleri önce elementleri seçip sonra javascript kodlarını yazarak yapabiliriz. Elementleri bu yüzden seçeriz. Şimdi kodlar ile nasıl seçileceğini görelim.

JAVASCRIPT’TE ELEMENTLERİ NASIL SEÇERİZ ?


1 – document.getElementById(“id”) methodu : 

Bildiğiniz gibi HTML elementlerine id özelliği ekleyebiliyoruz ve biz bu id’yi kullanarak javascript’te elementlerimizi seçebiliyoruz. Id özelliği genelde bir elemente verildiği için bu yöntem javascript’teki element seçme methodlarından en güvenlisidir diyebiliriz. Bu arada üstte’de bahsettiğim gibi todo-list projesinde ki html sayfasını kullanacağım. Mesela ben oradaki id’si “tasks-title, todo-form, clear-todos” olan 3 elementi seçmek istiyorum. Hemen kod üzerinde görelim.

Gördüğünüz gibi elementleri seçme şekli bu methodla bu şekildedir. Daha sonra tasksTitle’nin içindeki text değerini “Todolar” dan “Todos” a “textContent” methodu ile değiştirdik ve todoForm’un belirtmiş olduğu form etiketindeki her şeye innerHTML ile ulaşarak onları değiştirip “Bu todo’nun formudur” yaptık. Ve en son clearTodos’a bir eventListener yani üstünde yapılan olayı algılamaya yarayan bir method ekleyip (bunları daha sonra göreceğiz.) “click” eventini algılayarak bir alert pop-up’u çıkardık. Diğer methodla devam edelim.


2 – document.getElementsByName(“name”)  methodu : 

Bildiğiniz gibi HTML elementlerine name özelliği ekleyebiliyoruz ve biz bu name’yi kullanarak javascript’te elementlerimizi seçebiliyoruz. Bu methodu kullanarak name niteliği ile eşleşen tüm kayıtlar dizi olarak gelir. Bu arada üstte’de bahsettiğim gibi todo-list projesinde ki html sayfasını kullanacağım. Mesela ben oradaki name’i “form, todo, filter” olan 3 elementi seçmek istiyorum. Hemen kod üzerinde görelim.

Gördüğünüz gibi elementleri seçme şekli bu methodla bu şekildedir. Diğer methodla devam edelim.


3 – document.getElementsByTagName(“etiketadı”)  methodu :

Bildiğiniz gibi HTML elementlerini sayfamıza koyarken bir isime göre koyarız mesela paragraf etiketi “<p>”dir. Başlık etiketleri “<h1><h2><h3><h4><h5><h6>” dır. Bunun gibi bir sürü örnek vardır. Bu methodu kullanıp içine etiket adı girdiğinizde mesela sayfanızda 7 tane “<p>” etiketi vardır bu methodla p etikletlerini seçip console’a yazdırdığınızda 7 etiket’de karşınıza bir array(dizi) olarak gelir. Ben yine todo-list projesindeki sayfayı kullanacağım. Mesela oradaki “p, li, a” etiketlerini seçmek istiyorum. Hemen kod üzerinde görelim.

Gördüğünüz gibi bu methodla elementler böyle seçilir ve gelen diziden istediğiniz elementi böyle seçebilirsiniz. Sonraki methodla devam edelim.


4 – document.getElementsByClassName(“classadı”) methodu :

Bildiğiniz gibi HTML elementlerine class özelliği ekleyebiliyoruz ve biz bu class’ı kullanarak javascript’te elementlerimizi seçebiliyoruz. Bu methodu kullanarak class niteliği ile eşleşen tüm kayıtlar dizi olarak gelir. Bu arada üstte’de bahsettiğim gibi todo-list projesinde ki html sayfasını kullanacağım. Mesela ben oradaki class’ı “delete-item, list-group-item, form-control” olan 3 elementi seçmek istiyorum. Hemen kod üzerinde görelim.

Gördüğünüz gibi bu methodla elementler böyle seçilir ve gelen diziden istediğiniz elementi böyle seçebilirsiniz. Sonraki methodla devam edelim.


5 – document.querySelector(seçici) methodu :

Seçici ile eşleşen ilk kaydı getirir. Id’ye göre seçeceksiniz “#” ile kullanarak id’sini, Class’a göre seçeceksiniz “.” ile kullanarak class’ını girerek seçebilirsiniz. Ben sayfamız üzerinde id’si “todo-form, clear-todos”, class’ı “delete-item, form-control” olan elementleri seçeceğim. Hemen kod üzerinde görelim.

Gördüğünüz gibi bu methodla elementler böyle seçilir. Son methodumuzu’da görüp dersi bitirelim.


6 – document.querySelectorAll(seçici) methodu : 

Seçici ile eşleşen tüm kayıtları dizi olarak getirir. All’sız halinden farkı all’sız olanda o id veya class’a sahip ilk elementi getirirken all’da o id veya class’a sahip olan tüm elementleri getirir. Ben class’ı “form-control, list-group-item” olan elementleri seçeceğim. Hemen kod üzerinde görelim.

BİTİRİŞ


Bu dersimizde önemli bir konudan bahsettik. Sayfaları dinamik hale getirmenin en başlangıç konusu budur. Zor değil ama anlamadıysanız kendinizde başka başka elementleri seçerek denemeler yapabilirsiniz.

Javascript’te Document Objesi

[Toplam:1    Ortalama:5/5]

Sizin Tepkiniz Nedir?

süper süper
1
süper
bilgilendirici bilgilendirici
3
bilgilendirici
beğenmedim beğenmedim
0
beğenmedim
beğendim beğendim
0
beğendim
Düşündürücü Düşündürücü
0
Düşündürücü
Berkay

Yazılım ve Javascript adına kendini geliştirmekte olan ve bilgilerini paylaşmayı seven biri.

0 Yorum

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir format seçin
Kişisel Test
Kişiliğe dair bir şey ortaya çıkarmayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar vermek veya görüş belirlemek için oylama yapmak
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın
Fotoyla Anlatım
Kendi resimlerinizi yükleyin ve birşeyler anlatın
Video
Youtube, Vimeo veya Vine Kodları
Ses
Soundcloud veya Mixcloud İçerikleri
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı