JavaScript Academy · Ders

getElementById ve getElementsByClassName

Klasik seçim yöntemlerini kullanın.

getElementById ve getElementsByClassName, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

getElementById

getElementById, eşleşen id'ye sahip tek öğeyi veya null değerini döndürür. Kimlikler bir sayfada benzersiz olmalıdır; bu nedenle bu yöntem tek bir öğe döndürür.

const header = document.getElementById("header");
console.log(header.tagName);

Kare sembolü yok

CSS seçicilerinin aksine, ham kimliği # olmadan geçirirsiniz. "#header" geçirmek eşleşme bulamaz.

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

getElementsByClassName, verilen sınıfa sahip tüm öğelerden oluşan canlı bir HTML öğe koleksiyonu döndürür.

const cards = document.getElementsByClassName("card");
console.log(cards.length);

HTML öğe koleksiyonu canlıdır

Koleksiyon, DOM değiştikçe otomatik olarak güncellenir. Daha sonra yeni bir .card eklerseniz, yeniden sorgulama yapmadan cards.length artar.

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

Koleksiyonu dizinleme

Öğelere dizin kullanarak erişin. Bir HTMLCollection dizi benzeridir, ancak gerçek bir dizi değildir.

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

Doğrudan forEach yok

Dizi benzeri olduğu için (dizi olmadığı için) HTMLCollection üzerinde forEach bulunmaz. Önce dönüştürün veya normal bir for döngüsü kullanın.

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

getElementsByTagName, belirli bir etikete sahip her öğeden oluşan canlı bir HTML öğe koleksiyonu döndürür; örneğin tüm paragrafları.

const paras = document.getElementsByTagName("p");
console.log(paras.length);

Birden çok sınıf

Boşluklarla ayırarak birden çok sınıf adı geçirebilirsiniz. Bir öğenin dahil edilebilmesi için listelenen sınıfların tümüne sahip olması gerekir.

const items = document.getElementsByClassName("btn primary");

Bir öğeyle sınırlandırma

Bu yöntemler öğeler üzerinde de bulunur ve aramayı o öğenin alt öğeleriyle sınırlandırır.

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

Diziye dönüştürme

map veya filter gibi dizi yöntemlerini kullanmak için koleksiyonu gerçek bir diziye açarak dönüştürün.

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

Hangisini ne zaman kullanmalı

Hızlı ve benzersiz aramalar için getElementById kullanın. Statik bir anlık görüntü veya karmaşık seçiciler istediğinizde querySelectorAll'ı tercih edin; canlı bir koleksiyona özellikle ihtiyaç duyduğunuzda getElementsBy* ailesini kullanın.

Hızlı kontrol

Doğru davranışı seçin.

Özet

getElementById'i (ham kimlikle tek öğe, # olmadan), getElementsByClassName'i ve getElementsByTagName'i (canlı HTML öğe koleksiyonları) öğrendiniz. Canlı koleksiyonları, dizi yöntemlerini kullanmak için Array.from aracılığıyla dönüştürmeniz gerekir; ayrıca kendi forEach yöntemleri yoktur.

Sıkça Sorulan Sorular

“getElementById ve getElementsByClassName” dersi ücretsiz mi?

Evet — “getElementById ve getElementsByClassName” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“getElementById ve getElementsByClassName” dersinde ne öğreneceğim?

Klasik seçim yöntemlerini kullanın. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“getElementById ve getElementsByClassName” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

querySelector ile Öğe Seçme
getElementById ve getElementsByClassName
Üst, Alt ve Kardeş Öğeler Arasında Gezinme
NodeList ve HTMLCollection Karşılaştırması

← JavaScript Academy Sayfasına Dön