JavaScript DOM: querySelector ve querySelectorAll Kullanımı

document.querySelector("CSS-seçicisi")

// CSS'te: #menu { ... }
// JavaScript'te:
const menu = document.querySelector("#menu");

// CSS'te: .uyari { ... }
// JavaScript'te:
const uyari = document.querySelector(".uyari");

// CSS'te: p { ... }
// JavaScript'te:
const paragraf = document.querySelector("p");

// Eski yöntem
document.getElementById("menu");
document.getElementsByClassName("uyari")[0];
document.getElementsByTagName("p")[0];

// Yeni yöntem (querySelector)
document.querySelector("#menu");
document.querySelector(".uyari");
document.querySelector("p");

// type="email" olan input'u seç
const emailInput = document.querySelector('input[type="email"]');

// href'i belirli bir değer içeren linki seç
const link = document.querySelector('a[href*="google"]');

// data attribute ile seç
const ozel = document.querySelector('[data-kategori="elektronik"]');

// nav içindeki linkleri seç (ilk eşleşen)
const navLink = document.querySelector("nav a");

// header içindeki h1'i seç
const baslik = document.querySelector("header h1");

// ul içindeki ilk li'yi seç
const ilkMadde = document.querySelector("ul li");

// div'in doğrudan çocuğu olan p
const paragraf = document.querySelector("div > p");

// ul'nin doğrudan çocuğu olan li
const madde = document.querySelector("ul > li");

// İlk paragrafı seç
const ilk = document.querySelector("p:first-child");

// Son liste öğesini seç
const son = document.querySelector("li:last-child");

// 3. liste öğesini seç
const ucuncu = document.querySelector("li:nth-child(3)");

// Hem .btn hem .aktif class'ına sahip element
const aktifButon = document.querySelector(".btn.aktif");

// .kart içindeki .baslik
const kartBaslik = document.querySelector(".kart .baslik");

document.querySelectorAll("CSS-seçicisi")

<p class="mesaj">Birinci mesaj</p>
<p class="mesaj">İkinci mesaj</p>
<p class="mesaj">Üçüncü mesaj</p>

// Tek element (ilk eşleşen)
const tekMesaj = document.querySelector(".mesaj");
console.log(tekMesaj);  // <p class="mesaj">Birinci mesaj</p>

// Tüm elementler
const tumMesajlar = document.querySelectorAll(".mesaj");
console.log(tumMesajlar);  // NodeList(3) [p.mesaj, p.mesaj, p.mesaj]
console.log(tumMesajlar.length);  // 3

// NodeList - forEach çalışır!
const kutular = document.querySelectorAll(".kutu");
kutular.forEach(kutu => {
    console.log(kutu);
});

// HTMLCollection - forEach çalışmaz!
const elemanlar = document.getElementsByClassName("kutu");
// elemanlar.forEach(...);  // TypeError!

// HTMLCollection - Canlı (DOM değişince güncellenir)
const canliListe = document.getElementsByTagName("p");
console.log(canliListe.length);  // 2

// Yeni paragraf ekle
document.body.appendChild(document.createElement("p"));
console.log(canliListe.length);  // 3 (otomatik güncellendi!)

// NodeList - Statik (DOM değişince güncellenmez)
const statikListe = document.querySelectorAll("p");
console.log(statikListe.length);  // 3

// Yeni paragraf ekle
document.body.appendChild(document.createElement("p"));
console.log(statikListe.length);  // 3 (değişmedi, statik!)

<div class="kart">Kart 1</div>
<div class="kart">Kart 2</div>
<div class="kart">Kart 3</div>

const kartlar = document.querySelectorAll(".kart");

kartlar.forEach(kart => {
    kart.style.padding = "20px";
    kart.style.margin = "10px";
    kart.style.backgroundColor = "#f5f5f5";
    kart.style.borderRadius = "8px";
});

<form id="kayit-formu">
    <input type="text" name="ad" placeholder="Adınız">
    <input type="email" name="email" placeholder="E-posta">
    <input type="password" name="sifre" placeholder="Şifre">
    <button type="submit">Kayıt Ol</button>
</form>

// Formdaki tüm input'ları seç
const inputlar = document.querySelectorAll("#kayit-formu input");

inputlar.forEach(input => {
    input.style.display = "block";
    input.style.marginBottom = "10px";
    input.style.padding = "8px";
});

// Sadece text tipindeki input'u seç
const adInput = document.querySelector('input[type="text"]');
console.log(adInput.placeholder);  // "Adınız"

// Email input'unu seç
const emailInput = document.querySelector('input[type="email"]');
console.log(emailInput.name);  // "email"

<nav class="ana-menu">
    <a href="/">Ana Sayfa</a>
    <a href="/hakkimizda">Hakkımızda</a>
    <a href="/iletisim">İletişim</a>
</nav>

// Nav içindeki tüm linkleri seç
const menuLinkleri = document.querySelectorAll(".ana-menu a");

menuLinkleri.forEach(link => {
    link.style.marginRight = "20px";
    link.style.textDecoration = "none";
    link.style.color = "#333";
});

// Aktif sayfanın linkini bul
const aktifLink = document.querySelector('.ana-menu a[href="/"]');
aktifLink.style.fontWeight = "bold";
aktifLink.style.color = "#007bff";

<table id="urun-tablosu">
    <tr><td>Ürün A</td><td>100 TL</td></tr>
    <tr><td>Ürün B</td><td>200 TL</td></tr>
    <tr><td>Ürün C</td><td>150 TL</td></tr>
    <tr><td>Ürün D</td><td>300 TL</td></tr>
</table>

// Çift satırları seç (2., 4., 6. ...)
const ciftSatirlar = document.querySelectorAll("#urun-tablosu tr:nth-child(even)");
ciftSatirlar.forEach(satir => {
    satir.style.backgroundColor = "#f9f9f9";
});

// Tek satırları seç (1., 3., 5. ...)
const tekSatirlar = document.querySelectorAll("#urun-tablosu tr:nth-child(odd)");
tekSatirlar.forEach(satir => {
    satir.style.backgroundColor = "#ffffff";
});

<div data-durum="beklemede">Sipariş 1</div>
<div data-durum="tamamlandi">Sipariş 2</div>
<div data-durum="beklemede">Sipariş 3</div>
<div data-durum="iptal">Sipariş 4</div>

// Bekleyen siparişleri seç
const bekleyenler = document.querySelectorAll('[data-durum="beklemede"]');
bekleyenler.forEach(siparis => {
    siparis.style.backgroundColor = "#fff3cd";
    siparis.style.borderLeft = "4px solid #ffc107";
});

// Tamamlanan siparişleri seç
const tamamlananlar = document.querySelectorAll('[data-durum="tamamlandi"]');
tamamlananlar.forEach(siparis => {
    siparis.style.backgroundColor = "#d4edda";
    siparis.style.borderLeft = "4px solid #28a745";
});

// İptal edilen siparişleri seç
const iptalEdilenler = document.querySelectorAll('[data-durum="iptal"]');
iptalEdilenler.forEach(siparis => {
    siparis.style.backgroundColor = "#f8d7da";
    siparis.style.borderLeft = "4px solid #dc3545";
});

// Tüm başlıkları seç (h1, h2, h3)
const basliklar = document.querySelectorAll("h1, h2, h3");
basliklar.forEach(baslik => {
    baslik.style.fontFamily = "Arial, sans-serif";
});

// Tüm butonları ve linkleri seç
const tiklananlar = document.querySelectorAll("button, a");
console.log(`Tıklanabilir element sayısı: ${tiklananlar.length}`);

<div id="sidebar">
    <h3>Kategoriler</h3>
    <ul>
        <li>Teknoloji</li>
        <li>Spor</li>
    </ul>
</div>

<div id="icerik">
    <h3>Makaleler</h3>
    <ul>
        <li>Makale 1</li>
        <li>Makale 2</li>
    </ul>
</div>

// Sadece sidebar içindeki li'leri seç
const sidebar = document.querySelector("#sidebar");
const kategoriListesi = sidebar.querySelectorAll("li");
console.log(kategoriListesi.length);  // 2

// Sadece içerik içindeki li'leri seç
const icerik = document.querySelector("#icerik");
const makaleListesi = icerik.querySelectorAll("li");
console.log(makaleListesi.length);  // 2

// Tüm sayfadaki li'ler
const tumListeler = document.querySelectorAll("li");
console.log(tumListeler.length);  // 4

const yok = document.querySelector(".olmayan-class");
console.log(yok);  // null

// Güvenli kullanım
if (yok) {
    yok.style.color = "red";
} else {
    console.log("Element bulunamadı!");
}

// Optional chaining ile
yok?.style?.color = "red";  // Hata vermez

const yokListe = document.querySelectorAll(".olmayan-class");
console.log(yokListe);         // NodeList []
console.log(yokListe.length);  // 0

// ✅ Modern ve önerilen
document.querySelector("#menu");
document.querySelector(".btn");
document.querySelectorAll("p");

// ⚠️ Eski yöntemler (hala geçerli ama daha az esnek)
document.getElementById("menu");
document.getElementsByClassName("btn");
document.getElementsByTagName("p");

// İkisi de çalışır
document.getElementById("menu");      // Biraz daha hızlı
document.querySelector("#menu");      // Daha esnek

// Tek element seç (ilk eşleşen)
const element = document.querySelector(".class");
const element2 = document.querySelector("#id");
const element3 = document.querySelector("tag");
const element4 = document.querySelector("[data-attr='value']");

// Tüm eşleşenleri seç
const liste = document.querySelectorAll(".class");
const liste2 = document.querySelectorAll("nav a");

// NodeList üzerinde döngü (forEach destekler!)
liste.forEach(item => {
    // her item ile bir şeyler yap
});

// Element içinde arama
const container = document.querySelector("#container");
const icindekiler = container.querySelectorAll(".item");