getElementById() ile birden fazla öğe seçebilir miyim?

Hayır. getElementById() metodu yalnızca tek bir ID değeri alır ve bu ID sayfada yalnızca bir öğeye ait olmalıdır. ID'ler HTML'de benzersiz olmalıdır, dolayısıyla bu yöntemle birden fazla öğe seçilemez.

getElementsByTagName() kullanarak sadece bir öğeyi nasıl seçebilirim?

Bu metot birden fazla öğeyi kapsayan bir HTMLCollection döndürür. Eğer yalnızca ilk öğeye erişmek isterseniz, indeksleme kullanabilirsiniz: let ilkParagraf = document.getElementsByTagName("p")[0];

getElementById() ile dönen sonuç bir dizi midir?

Hayır. getElementById() doğrudan bir Element nesnesi döner. Bu nedenle, dizideymiş gibi indeks kullanamazsınız.

getElementsByTagName() sonucu bir array midir?

Hayır. Bu metodun döndürdüğü sonuç, array-benzeri bir yapı olan HTMLCollection'dır. Bu yapıda indeksleme ve length kullanabilirsiniz ama forEach() gibi dizi metodlarını doğrudan kullanamazsınız (önce diziye çevirmeniz gerekir).

Hangi seçim yöntemi daha performanslıdır?

getElementById() genellikle daha hızlıdır çünkü doğrudan tek ve benzersiz bir öğeye erişir. getElementsByTagName() daha fazla öğeyi kontrol eder, bu nedenle özellikle çok sayıda öğe varsa biraz daha yavaş olabilir.

ID ile seçtiğim öğe yoksa ne olur?

Eğer seçmek istediğiniz ID sayfada yoksa, getElementById() metodu null döner. Bu yüzden işlem yapmadan önce kontrol etmek iyi bir pratiktir.

ID veya etiket adları büyük/küçük harf duyarlı mı?

HTML etiket ve ID adları case-insensitive (büyük/küçük harf duyarsız) olarak değerlendirilir. Ancak JavaScript içinde yazarken, genellikle doğru ve tutarlı yazım tercih edilir.

DOM İçerisinden Etiket Ve ID Ile Öğe Seçimi

İçindekiler

Web geliştirme dünyasında, HTML sayfalarının yapısını anlayabilmek ve bu yapı üzerinde dinamik değişiklikler yapabilmek için JavaScript’in DOM (Document Object Model) yapısından faydalanırız. DOM, bir web sayfasının tarayıcı tarafında temsil edilen hiyerarşik ağaç yapısıdır. Sayfa yüklendiğinde tarayıcı, HTML belgesini DOM olarak adlandırılan bu yapıya dönüştürür. JavaScript sayesinde bu ağaçtaki her bir öğeye (node) ulaşabilir, özelliklerini değiştirebilir, hatta yeni öğeler ekleyip silebiliriz.

Bu yazımızda, DOM içerisinden etiket (tag) ismi ve ID kullanarak nasıl öğe seçimi yapabileceğimizi ayrıntılı örneklerle birlikte inceleyecek, bu seçim yöntemlerinin hangi durumlarda daha uygun olduğunu tartışacaz.

1. Etiket (Tag) ismi ile Öğe Seçimi

Bir HTML belgesinde aynı etiket ismini taşıyan birden fazla öğe olabilir. Örneğin bir sayfa içinde birden çok <p> etiketi yer alabilir. Bu öğelerin tümüne veya belirli bir tanesine erişmek için getElementsByTagName metodunu kullanabiliriz.

Kullanım:

let paragraflar = document.getElementsByTagName("p");

Bu kod, sayfadaki tüm <p> etiketlerini seçer ve bir HTMLCollection dönür. HTMLCollection, diziye benzer bir yapıdır fakat dizi metodlarını doğrudan desteklemez. Erişim için indis kullanabilirsiniz.

Örnek:

<p>Merhaba dünya!</p>
<p>Bugün hava güzel.</p>
<p>DOM kullanımı oldukça faydalıdır.</p>

let paragraflar = document.getElementsByTagName("p");
console.log(paragraflar[0].innerText); // "Merhaba dünya!"
console.log(paragraflar.length); // 3

Ayrıca döngü yardımıyla tüm paragrafları listeleyebilirsiniz:

for (let i = 0; i < paragraflar.length; i++) {
  console.log(paragraflar[i].innerText);
}

2. ID ile Öğe Seçimi

Bir HTML sayfasında her ID benzersizdir. Yani bir ID sadece bir öğeye ait olabilir. Bu nedenle, bir öğeyi ID’siyle seçmek hem kesin hem de performans açısından en verimli yöntemlerden biridir.

Kullanım:

let baslik = document.getElementById("anaBaslik");

Örnek:

<h1 id="anaBaslik">DOM Seçimi</h1>

let baslik = document.getElementById("anaBaslik");
console.log(baslik.innerText); // "DOM Seçimi"
baslik.style.textTransform = "uppercase"; // DOM SEÇİMİ

ID ile seçilen öğe bir Element nesnesi olarak geri döner ve stil, içerik, class gibi birçok özelliği kolayca değiştirilebilir.

3. Etiket ve ID Seçimi Arasındaki Farklar

Özellik	getElementById	getElementsByTagName
Benzersizlik	Evet (bir tane)	Hayır (birden fazla)
Dönen Tip	Element	HTMLCollection
Hız	Daha hızlı	Daha yavaş olabilir
Kullanım Amacı	Spesifik tek bir öğeye erişim	Aynı türde birden çok öğeye erişim

Eğer sayfanızda belirli ve eşsiz bir öğeye ulaşmak istiyorsanız, getElementById kullanmak en doğru tercih olur. Ama birden fazla benzer etiketle işlem yapacaksanız, getElementsByTagName size ihtiyacınız olan listeyi sunar.

4. Örnek Uygulama

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>DOM Örnek</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
  </style>
</head>
<body>
  <h1 id="sayfaBasligi">Etiket ve ID ile DOM Seçimi</h1>
  <p>Birinci paragraf</p>
  <p>İkinci paragraf</p>
  <p>Üçüncü paragraf</p>

  <script>
    let baslik = document.getElementById("sayfaBasligi");
    let paragraflar = document.getElementsByTagName("p");

    baslik.style.color = "blue";
    baslik.style.fontSize = "28px";

    for (let i = 0; i < paragraflar.length; i++) {
      paragraflar[i].style.backgroundColor = i % 2 === 0 ? "#f0f0f0" : "#d0f0d0";
      paragraflar[i].innerText += ` (paragraf ${i + 1})`;
    }
  </script>
</body>
</html>

Bu basit ama etkili uygulamada, ID ile başlık seçiliyor ve rengi maviye dönüştü;rülüyor, font boyutu büyütülüyor. Paragraflar ise etiket isimleriyle seçilip, her birine farklı arka plan renkleri atanıyor ve içeriklerine sıra numarası ekleniyor.

5. Dikkat Edilmesi Gerekenler

ID ile seçim yaparken, ID’nin HTML belgesinde benzersiz olması gerektiğini unutmayın.
getElementsByTagName her zaman canlı (live) bir HTMLCollection döner. Yani DOM’da değişiklik yaparsanız, bu koleksiyon otomatik güncellenir.
HTMLCollection bir dizi değil, bu nedenle forEach gibi dizi metodlarını doğrudan kullanamazsınız. Ancak diziye çevirerek bu metodlardan faydalanabilirsiniz.

let paragrafListesi = Array.from(document.getElementsByTagName("p"));
paragrafListesi.forEach(p => p.style.border = "1px solid gray");

Sonuç

JavaScript ile DOM manipülasyonu yaparken doğru öğe seçim yöntemini kullanmak, hem kodun okunabilirliğini hem de uygulamanın performansını olumlu yönde etkiler. Etiket ismiyle yapılan seçim, grup halindeki öğelerde etkilidir; ID ile yapılan seçim ise spesifik ve tektir.

Bu yazıda ele aldığımız bilgiler, JavaScript’in DOM dünyasına atacağınız ilk adımı şekillendirecek. Bir sonraki adım olarak class seçimi, querySelector / querySelectorAll gibi daha esnek seçim yöntemlerine yönelebilir, DOM içeriğini dinamik olarak oluşturma, olay dinleme gibi ileri seviye konularla becerilerinizi pekleştirebilirsiniz. Daha fazlası için “Javascript“, “HTML“, “CSS” kategorilerine bakabilirsiniz.

getElementById() ile birden fazla öğe seçebilir miyim?
Hayır. getElementById() metodu yalnızca tek bir ID değeri alır ve bu ID sayfada yalnızca bir öğeye ait olmalıdır. ID’ler HTML’de benzersiz olmalıdır, dolayısıyla bu yöntemle birden fazla öğe seçilemez.
getElementsByTagName() kullanarak sadece bir öğeyi nasıl seçebilirim?
Bu metot birden fazla öğeyi kapsayan bir HTMLCollection döndürür. Eğer yalnızca ilk öğeye erişmek isterseniz, indeksleme kullanabilirsiniz:
let ilkParagraf = document.getElementsByTagName("p")[0];
getElementById() ile dönen sonuç bir dizi midir?
Hayır. getElementById() doğrudan bir Element nesnesi döner. Bu nedenle, dizideymiş gibi indeks kullanamazsınız.
getElementsByTagName() sonucu bir array midir?
Hayır. Bu metodun döndürdüğü sonuç, array-benzeri bir yapı olan HTMLCollection‘dır. Bu yapıda indeksleme ve length kullanabilirsiniz ama forEach() gibi dizi metodlarını doğrudan kullanamazsınız (önce diziye çevirmeniz gerekir).
Hangi seçim yöntemi daha performanslıdır?
getElementById() genellikle daha hızlıdır çünkü doğrudan tek ve benzersiz bir öğeye erişir. getElementsByTagName() daha fazla öğeyi kontrol eder, bu nedenle özellikle çok sayıda öğe varsa biraz daha yavaş olabilir.
ID ile seçtiğim öğe yoksa ne olur?
Eğer seçmek istediğiniz ID sayfada yoksa, getElementById() metodu null döner. Bu yüzden işlem yapmadan önce kontrol etmek iyi bir pratiktir.
ID veya etiket adları büyük/küçük harf duyarlı mı?
HTML etiket ve ID adları case-insensitive (büyük/küçük harf duyarsız) olarak değerlendirilir. Ancak JavaScript içinde yazarken, genellikle doğru ve tutarlı yazım tercih edilir.

Kaynak patika.dev

Etiketler: JavaScript DOM

Paylaş:

Tayyip Bölük

Merhaba, ben Tayyip Bölük. Profesyonel bir yazılım geliştiricisi olarak, özellikle PHP tabanlı web projeleri geliştirme konusunda uzmanlaşmış durumdayım. Yazılım dünyasındaki yolculuğuma, yaratıcı çözümler üreterek ve kullanıcı odaklı projeler geliştirerek devam ediyorum.Blog sitemde yazılım ve teknolojiye dair güncel bilgileri, yenilikleri ve ipuçlarını paylaşıyorum. Amacım, yazılım dünyasına ilgi duyan herkese faydalı içerikler sunarak bilgi birikimimi paylaşmak ve sektörel gelişmelere ışık tutmak.PHP’nin yanı sıra, React, Bootstrap, Tailwind, Jquery gibi modern araçları kullanarak dinamik, kullanıcı dostu ve performanslı web siteleri geliştirme üzerine çalışıyorum. Ayrıca, öğretmenlere ve öğrencilere yönelik inovatif projeler geliştirme konusundaki tutkum sayesinde, eğitim ve yazılımı birleştiren projeler üretmeyi hedefliyorum.Eğer siz de yazılım ve teknoloji konularına ilgi duyuyorsanız, bloğumda sizin için ilham kaynağı olabilecek içerikler bulabilirsiniz.