Skip to main content

JavaScript ile DOM Elementlerine Erişim Yöntemleri 🚀

Bu rehberde ne öğreneceksiniz?​

Bu kapsamlı kılavuzda, JavaScript kullanarak DOM elementlerine erişmenin beş temel yolunu adım adım öğreneceksiniz: getElementById, getElementsByClassName, getElementsByTagName, querySelector ve querySelectorAll. Bu yöntemlerle, web sayfanızdaki HTML öğelerini seçip dinamik şekilde değiştirebilir, etkileşimli içerikler oluşturabilirsiniz.

DOM Nedir?​

DOM (Document Object Model), bir web sayfasının HTML yapısının JavaScript tarafından erişilebilir halidir. Tarayıcı, sayfayı bu modelle temsil eder. Biz geliştiriciler de bu modeldeki elementlere erişip içerik veya stil değişikliği yapabiliriz.

Giriş: DOM Elementleri Neden Önemli?​

Web sayfasını dinamik hale getirmek istiyorsanız, önce DOM üzerindeki HTML öğelerine erişmeyi öğrenmelisiniz. Bu erişim, örneğin bir butona tıklandığında renk değiştirmek, bir formu doğrulamak veya kullanıcı etkileşimlerini yönetmek gibi işlemlerin temelidir. Aşağıdaki tablo, DOM elementlerine erişim için kullanılabilecek yöntemleri özetler:

Erişim Tipi Seçici Sözdizimi Metot ID #ornek getElementById() Sınıf (Class) .ornek getElementsByClassName() Etiket (Tag) div getElementsByTagName() Sorgu Seçici (Tekil) #ornek veya .ornek querySelector() Sorgu Seçici (Çoğul) .ornek veya p querySelectorAll() Örnek HTML Dosyası: dom-erisim.html

Aşağıdaki yapı, tüm yöntemleri test edebilmeniz için örnek HTML dosyasıdır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>DOM Elementlerine Erişim</title>
  <style>
    body { max-width: 550px; margin: 0 auto; padding: 20px; font-family: sans-serif; }
    div, section { padding: 12px; margin: 6px; border: 1px solid #c9c9c9; }
  </style>
</head>
<body>

  <h1>JavaScript ile DOM Elementlerine Erişim</h1>

  <h2>ID (#ana-kutu)</h2>
  <div id="ana-kutu">ID ile erişilecek öğe</div>

  <h2>Sınıf (.liste-elemani)</h2>
  <div class="liste-elemani">Sınıf ile erişilecek öğe (1)</div>
  <div class="liste-elemani">Sınıf ile erişilecek öğe (2)</div>

  <h2>Etiket (section)</h2>
  <section>Etiket adı ile erişilecek öğe (A)</section>
  <section>Etiket adı ile erişilecek öğe (B)</section>

  <h2>Sorgu Seçici (#tekil-kutu)</h2>
  <div id="tekil-kutu">querySelector ile erişilecek öğe</div>

  <h2>Sorgu Seçici Tümü (.coklu-kutu)</h2>
  <div class="coklu-kutu">querySelectorAll ile erişilecek öğe (X)</div>
  <div class="coklu-kutu">querySelectorAll ile erişilecek öğe (Y)</div>

  <script src="dom-erisim.js"></script>
</body>
</html>

5 Adımda DOM Elementlerine Erişim​

  1. ID ile Erişim – getElementById()

Bu yöntem, benzersiz bir öğeye en hızlı erişim yoludur.

const kutuID = document.getElementById('ana-kutu');
kutuID.style.border = '2px solid purple';

➡️ Bu komut, ID’si ana-kutu olan öğeyi seçip kenarlığını mora boyar.

  1. Sınıf ile Erişim – getElementsByClassName()

Birden fazla öğe seçmek için sınıf adını kullanırız.

const kutuClass = document.getElementsByClassName('liste-elemani');
for (let i = 0; i < kutuClass.length; i++) {
  kutuClass[i].style.border = '2px solid orange';
}

➡️ Tüm .liste-elemani sınıflı öğelerin çerçevesini turuncuya çevirir.

  1. Etiket ile Erişim – getElementsByTagName()

Etiket adını kullanarak birden fazla öğeye erişim sağlar.

const kutuTag = document.getElementsByTagName('section');
for (let i = 0; i < kutuTag.length; i++) {
  kutuTag[i].style.border = '2px solid blue';
}

➡️ Sayfadaki tüm <section> etiketli öğeleri seçer ve kenarlıklarını maviye çevirir.

  1. Tekil Sorgu Seçici – querySelector()

CSS seçici sözdizimiyle tek bir öğe seçer.

const kutuQuery = document.querySelector('#tekil-kutu');
kutuQuery.style.border = '2px solid red';

➡️ ID’si tekil-kutu olan ilk öğeyi seçip kırmızı kenarlık ekler.

  1. Çoklu Sorgu Seçici – querySelectorAll()

Tüm eşleşen öğeleri seçer ve NodeList döndürür.

const kutuQueryAll = document.querySelectorAll('.coklu-kutu');
kutuQueryAll.forEach(query => {
  query.style.border = '2px solid green';
});

➡️ .coklu-kutu sınıfına sahip tüm öğelerin çerçevesini yeşile çevirir.

Sıkça Sorulan Sorular (SSS)​

  1. getElementById() ile querySelector('#id') arasında fark var mı?

Evet. İlki sadece ID ile çalışır ve daha hızlıdır. İkincisi CSS seçici mantığıyla çalışır ve esnektir.

  1. Neden bazı metotlar dizi değil NodeList veya HTMLCollection döndürür?

Çünkü DOM koleksiyonları canlı veya statik olabilir. getElementsBy... metotları canlı koleksiyon döndürürken, querySelectorAll() statiktir.

  1. Hangisini ne zaman kullanmalıyım?

  • ID → tekil öğe için

  • Class/Tag → birden fazla öğe için

  • QuerySelector → karmaşık seçiciler için

  1. querySelector() çoklu öğelerde nasıl davranır?

İlk eşleşen öğeyi döndürür. Tümünü almak için querySelectorAll() kullanılır.

Sonuç​

Artık JavaScript ile DOM elementlerine erişim yollarını biliyorsunuz. Bu beceriyle web sayfanızdaki her öğeyi seçebilir, dinamik efektler ve etkileşimler oluşturabilirsiniz. Projelerinizi Rabisu Bulut altyapısında barındırarak bu örnekleri güvenli ve hızlı şekilde deneyin.