HTML DOM
Diskteki HTML dosyası yalnızca karakter tutar. Tarayıcı bu dosyadan canlı bir ağaç kurar; bu ağacın adı DOM’dur. Durağın camında iki satır vardır: başlık Market ve not Stand clear. Açık sayfa document ile gelir. new document() hata verir, new Document() ise boş bir belgedir, bu pano değildir.
Bu bir ağaç, yuvarlama değil
Math nesnesinin sayfasında ortak bir nesneden sayı geliyordu. Burada bir genişlik yuvarlanmaz ve new Date ile bir an kurulmaz. document kökünden aşağı inersin: html öğesi, sonra head’in yanında body, sonra başlığın yanında not. Öğeyi birden fazla yolla seçmek, işaretlemeyi değiştirmek ve yeni düğüm kurmak sonraki sayfalarda. Bu sayfa biçimi öğrenir ve iki düğümü okur.
Her parça panoda nerede
Her satır parmakla gösterebileceğin bir yerdir. Son sütun, seni başka yere götüren karışıklıktır.
📊 Bu panodaki yerler
| Yer | Elinde ne var | Bu panoda | Kolay karışır |
|---|---|---|---|
document |
ağacın kendisi | giriş, etiket adı yok | onu body sanmak |
document.documentElement |
html öğesi | etiket HTML |
ona başlık demek |
document.head |
head öğesi | body’nin kardeşi | Market’i burada aramak |
document.body |
body öğesi | başlığın ebeveyni | bir metin düğümü |
h1#stop |
başlık öğesi | metin Market |
diskte kayıtlı dosya |
| başlığın içindeki metin | yalnızca karakter | Market sözcüğü | id’si olan bir öğe |
Başlık ve not, body’nin öğe çocuklarıdır, yani kardeştirler. Market sözcüğü notun kardeşi değildir. Başlığın içindeki metindir. tagName büyük harf döner, bu yüzden html öğesi HTML der. document düğümünün etiketi de ebeveyn öğesi de yoktur.
Ağacın tepesindeki üç ad
Bu üç özellik dış öğeleri adlandırır. Hiçbiri camdaki başlık değildir.
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);
Üç satır şunlardır: HTML, HEAD ve BODY. Head ve body ikisi de html öğesinin çocuğudur, bu yüzden kardeştirler. Market head’in içinde değildir. Head’deki sekme başlığı, camdaki başlıktan başka bir dizgedir.
Başlığın ailesi
stop id’si başlık öğesinin tutamacıdır. Ebeveyn öğesi body’dir. Sonraki öğe kardeş nottur.
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);
İlk satır BODY. İkinci satır note. nextElementSibling satır sonunu atlar ve paragrafa iner. Önceki öğe kardeş null’dır, çünkü body içinde başlıktan önce öğe yoktur.
Sözcük ayrı, tutamaç ayrı
Öğeyi okumak ile karakterleri okumak aynı iş değildir.
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);
İlki Market, ikincisi stop. textContent karakterlerdir. id tutamacıdır. Not Stand clear der ve bu dizge başlıkta yoktur.
Önce öğeler, sonra her düğüm
children yalnızca öğe çocuklarını sayar. childNodes metin düğümlerini de sayar; pano dosyasındaki satır sonları da buna girer. Bunu yalnızca başlık ve not içeren bir body üzerinde çalıştır, bu ders sayfasında değil ve aşağıdaki okuma dosyasında değil.
console.log(document.body.children.length);
console.log(document.body.childNodes.length);
Başlıktan önce, iki öğenin arasında ve nottan sonra birer satır sonu varsa children.length 2, childNodes.length 5 olur. Fazladan üç düğüm metindir ve yalnızca boşluk tutar. İki etiketi tek satıra yapıştırırsan o metin düğümleri gider ve iki uzunluk birleşir.
Panoda olmayan bir ad
Dosyanın hiç yazmadığı bir id iste.
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);
İlk satır null. İkinci satır false, çünkü stop vardır. null öğe yok demektir, boş başlık değil. textContent içine yeni bir dizge yazmak tarayıcıdaki canlı ağacı değiştirir. Diskteki HTML dosyası hâlâ Market der.
Sayfada bir satır
Üçüncü paragraf ebeveynin etiketini ve başlık metnini yazar. Betik body’nin sonundadır, bu öğeler oluştuktan sonra.
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>
Paragraf BODY / Market okur. Bu dosyada betikten önce body içinde üç öğe vardır, bu yüzden 2 uzunluğu buraya ait değildir. script öğesi de bir çocuktur. Sonraki sayfa öğeleri birden fazla yoldan seçer.
Panoyu kendin yokla
- Üç dış etiket adını yaz ve HTML, sonra HEAD, sonra BODY bekle
- Başlığın ebeveyn etiketini yaz ve BODY bekle
- Sonraki öğe kardeşin id’sini yaz ve note bekle
- Başlık metnini yaz ve Market bekle, sonra id’yi ve stop bekle
- İki öğeli panoda children uzunluğunu 2, childNodes uzunluğunu 5 bekle
- Eksik id’yi yaz ve null bekle, sonra stop karşılaştırmasını ve false bekle
- Paragrafı oku ve BODY / Market bekle
Yanlış yer
Sayfa açılır. Adını verdiğin yer başlığın yeri değildir.
new document()çağırmak ya danew Document()sonucunu bu pano sanmak- Market’i
document.headiçinde aramak - Market sözcüğünü notun öğe kardeşi saymak
- Satır sonları dahil her düğümü isterken
children.lengthokumak - Yalnızca başlık ve notu isterken
childNodes.lengthokumak - Eksik id’den gelen
nulldeğerini boş dizge sanmak textContentyazısının diskteki dosyayı da değiştireceğini beklemek
Bunları ayrı tut
documentağaçtır;documentElementhtml öğesidirheadvebodyo html öğesinin altında kardeştir- Başlığın ebeveyni body’dir; sonraki öğe kardeş nottur
textContentkarakterdir;idtutamaçtırchildrenyalnızca öğedir;childNodesboşluk metnini de içerir- Eksik id
null’dır; kayıtlı dosya canlı ağaç değildir - Sonraki sayfa öğeyi tek bir id’den öte seçer
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek