JavaScriptYazılım

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.

const tasksTitle = document.getElementById('tasks-title');
const todoForm = document.getElementById('todo-form');
const clearTodos = document.getElementById('clear-todos');

tasksTitle.textContent = "Todos";
todoForm.innerHTML = "<p> + "Bu todonun formudur" +</p>";
clearTodos.addEventListener("click", (e) => {
   alert("Tüm todoları temizleme butonuna bastınız");
   e.preventDefault();
});

console.log(tasksTitle); // İlgili elementi console'a basar.
console.log(todoForm); // İlgili elementi console'a basar.
console.log(clearTodos); // İlgili elementi console'a basar.

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.

const form = document.getElementsByName('form'); 
const todo = document.getElementsByName('todo'); 
const filter = document.getElementsByName('filter');


console.log(form); // İlgili elementi console'a basar. 
console.log(todo); // İlgili elementi console'a basar. 
console.log(filter); // İlgili elementi console'a basar.

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.

const p = document.getElementsByTagName("p");
const li = document.getElementsByTagName("li");
const a = document.getElementsByTagName("a");
const firstLi = li[0];
const secondP = p[1];

console.log(p); // P etiketlerinden oluşan diziyi console'a basar.
console.log(li); // Li etiketlerinden oluşan diziyi console'a basar.
console.log(a); // A etiketlerinden oluşan diziyi console'a basar.
console.log(firstLi); // Gelen li dizisinin 0'ıncı indexini yani ilk elemanını console'a basar.
console.log(secondP); // Gelen p dizisinin 1'inci indexini yani ikinci elemanını console'a basar.

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.

const deleteItem = document.getElementsByClassName("delete-item");
const listGroupItem = document.getElementsByClassName("list-group-item"); 
const formControl = document.getElementsByClassName("form-control"); 
const firstDeleteItem = deleteItem[0]; 
const secondFormControl = formControl[1]; 

console.log(deleteItem); // Class'ı deleteItem olanlardan oluşan diziyi console'a basar. 
console.log(listGroupItem); // Class'ı listGroupItem olanlardan oluşan diziyi console'a basar.  
console.log(formControl); // Class'ı formControl olanlardan oluşan diziyi console'a basar. 
console.log(firstDeleteItem); // Class'ı deleteItem olanlardan oluşan dizinin ilk elemanını console'a basar. 
console.log(secondFormControl); // Class'ı formControl olanlardan oluşan dizinin ikinci elemanını console'a basar.

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.

const todoForm = document.querySelector("#todo-form");
const clearTodos = document.querySelector("#clearTodos");
const deleteItem = document.querySelector(".delete-item");
const formControl = document.querySelector(".form-control");

console.log(todoForm); // İlgili elementi console'a basar.
console.log(clearTodos); // İlgili elementi console'a basar.
console.log(deleteItem); // İlgili elementi console'a basar.
console.log(formControl); // İlgili elementi console'a basar.

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.

const listGroupItem = document.querySelectorAll(".list-group-item"); 
const formControl = document.querySelectorAll(".form-control"); 
const firstDeleteItem = deleteItem[0]; 
const secondFormControl = formControl[1]; 


console.log(listGroupItem); // Class'ı listGroupItem olanlardan oluşan diziyi console'a basar. 
console.log(formControl); // Class'ı formControl olanlardan oluşan diziyi console'a basar. 
console.log(firstDeleteItem); // Class'ı deleteItem olanlardan oluşan dizinin ilk elemanını console'a basar. 
console.log(secondFormControl); // Class'ı formControl olanlardan oluşan dizinin ikinci elemanını console'a basar.

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

Oylamak için tıklayınız :
[Toplam: 0 Puan: 0]
Etiketler

İlgili Makaleler

Bir cevap yazın

Başa dön tuşu
Kapalı

Reklam Engelleyici Algılandı !

Reklam engelleyiciyi kapatarak bize destek olabilirsiniz..