Yükleniyor...

HTML’i değiştirme

Sayfada duran feribot fişinde tekne adı Gull, saat 09:10, not ise Boarding. HTML değiştirmek, elindeki öğenin içine yeni içerik yazmaktır. boat.textContent = "Heron" Heron sözcüklerini olduğu gibi koyar. note.textContent = "<em>Late</em>" bu karakterleri gösterir ve note.querySelector("em") değeri null olur. note.innerHTML = "<em>Late</em>" metni Late olan bir em kurar. Bundan sonra note.textContent Late okunur, note.innerHTML ise etiketleri hâlâ taşır. İkinci yazma, note.innerHTML = "Dock 2", o em öğesini siler. note.insertAdjacentHTML("beforeend", " <span>gate B</span>") Dock 2’yi bırakır ve gate B’yi ekler; not Dock 2 gate B olur. Saate bir şey atanmaz, o yüzden 09:10 kalır.

Yazmak, yeniden aramak değil

Önceki sayfa bir düğümü bulma yollarını yan yana koydu. Bu sayfa bir koleksiyon saymaz, bir indis okumaz ve parentElement üzerinde yürümez. getElementById yalnızca fişi verir. Ders, atadığın değerdir.

Her yazma notta ne bırakır

Not Boarding ile başlar. Satırları sırayla oku. Her atama notu ya değiştirir ya da uzatır.

📊 Her yazma notta ne bırakır

Yazma Ne görürsün Ne kalır Kolay karışan
textContent = "Heron" teknede Heron bir metin düğümü adı Heron olan bir öğe
textContent = "<em>Late</em>" <em>Late</em> karakterleri hiç em öğesi yok gerçek bir em
innerHTML = "<em>Late</em>" Late bir em etiketlerin textContent içinde kalması
innerHTML = "Dock 2" Dock 2 em gitti em öğesinin Dock 2 yanında durması
insertAdjacentHTML("beforeend", " <span>gate B</span>") Dock 2 gate B Dock 2 artı bir span Dock 2’yi silen innerHTML

textContent bir dizgi saklar ve etiketleri çözümlemez. innerHTML etiketleri çözümler ve öğede duran her çocuğu atar. insertAdjacentHTML da etiketleri çözümler, ama beforeend yeni düğümleri mevcut içeriğin sonuna koyar. Gişede yazılan tekne adı textContent içine girer. Aynı dizgi innerHTML olursa küçüktür işareti işaretleme sayılır.

Yazmadan önce fişi oku

Dosya üç değerle açılır. Henüz bir atama yoktur.

Fişi okumak

javascript 
console.log(document.getElementById("boat").textContent);
console.log(document.getElementById("when").textContent);
console.log(document.getElementById("note").textContent);

Kayıtlar Gull, 09:10 ve Boarding olur. Saat ayrı bir paragraftır. Sonraki yazmalar when öğesine dokunmaz.

Sözcük sözcük kalır

textContent her çocuğu tek bir metin düğümüyle değiştirir. Etikete benzeyen karakterler karakter olarak kalır.

Düz sözcükler

javascript 
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.textContent = "<em>Late</em>";
console.log(boat.textContent);
console.log(note.textContent);
console.log(note.querySelector("em"));

İlk satır Heron. İkinci satır <em>Late</em> karakterleri. Üçüncü satır null. Not, etiketi metin olarak gösterir; öğe kurmaz.

innerHTML öğeyi kurar

Aynı karakterleri innerHTML ile ver. Ayrıştırıcı dizgiyi düğümlere çevirir ve notun içindekini değiştirir.

Çözümlenen işaret

javascript 
let note = document.getElementById("note");
note.innerHTML = "<em>Late</em>";
console.log(note.textContent);
console.log(note.innerHTML);
console.log(note.querySelector("em") === null);

İlk satır Late. İkinci satır <em>Late</em>, çünkü innerHTML işaretlemeyi etiketlerle birlikte döndürür. Üçüncü satır false: em duruyor, yani null değil. Görünen sözcükler ile işaret dizgisi aynı öğenin iki okumasıdır.

Sonraki innerHTML o em öğesini siler

Yeni bir innerHTML değeri notun tamamını değiştirir. em yeni metnin yanında kalmaz.

Yeniden değiştirmek

javascript 
let note = document.getElementById("note");
note.innerHTML = "Dock 2";
console.log(note.textContent);
console.log(note.querySelector("em"));

İlk satır Dock 2. İkinci satır null. Boarding zaten gitmişti. Bu yazma em öğesini de götürür.

gate B ekle, Dock 2 kalsın

insertAdjacentHTML("beforeend", ...) bir parçayı çözümler ve sona koyar. Bu dizgi bir boşlukla başlar; iki parça iki sözcük olarak kalır. Başka konumlar da vardır. Bu sayfa yalnız beforeend kullanır.

Sona eklemek

javascript 
let note = document.getElementById("note");
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
console.log(note.textContent);
console.log(note.querySelector("span").textContent);

İlk satır Dock 2 gate B. İkinci satır gate B. Dock 2 notun içinde durur. Aynı span dizgisini innerHTML ile atamak Dock 2’yi silerdi.

Fişin altında bir satır

Betik body sonundadır, fiş sayfada varken. Dock 2, em öğesinin yerini almadan önce Late sözcüğünü saklar; sonra tekne adından, saklanan sözcükten ve gate B eklendikten sonraki nottan bir satır yazar.

Sayfa demosu — feribot fişi

html 
<!DOCTYPE html>
<html>
<head>
<title>changing html — page</title>
</head>
<body>
<article id="slip">
<h2 id="boat">Gull</h2>
<p id="when">09:10</p>
<p id="note">Boarding</p>
<p id="line">…</p>
</article>
<script>
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.innerHTML = "<em>Late</em>";
let late = note.textContent;
note.innerHTML = "Dock 2";
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
document.getElementById("line").textContent = boat.textContent + " / " + late + " / " + note.textContent;
</script>
</body>
</html>

Satır Heron / Late / Dock 2 gate B olur. Saat hâlâ 09:10 okunur. Satırdaki Late, silinmeden önce saklanan sözcüktür. Notun kendisi artık Late demez. Sonraki sayfa bu tür öğelerin CSS değerini değiştirir; onları bulmak için yeni bir yol getirmez.

Fişi denetle

  1. Üç başlangıç metnini yazdır; Gull, 09:10 ve Boarding bekle
  2. Tekneyi Heron yap, notu em karakterlerine eşitle; o dizgiyi ve null bir em bekle
  3. innerHTML değerini em dizgisi yap; textContent olarak Late, etiketli innerHTML ve null olmayan bir em bekle
  4. innerHTML değerini Dock 2 yap ve em için null bekle
  5. span öğesini beforeend ile ekle; Dock 2 gate B, sonra span metni gate B bekle
  6. Satırı oku: Heron / Late / Dock 2 gate B; saati oku: 09:10

Bu fişteki kaçışlar

Sayfa yine açılır. Atama yanlış türde bir değer yazmıştır.

  • Gişede yazılan adı innerHTML içine koymak; < işaretleme olur
  • textContent = "<em>Late</em>" ifadesinin bir em kurmasını beklemek
  • em yazısından sonra textContent okuyup o dizgide etiket beklemek
  • innerHTML yine atayıp em öğesinin kalmasını beklemek
  • gate B’yi innerHTML ile ekleyip Dock 2’yi kaybetmek
  • Baştaki boşluğu atmak; not Dock 2gate B olur
  • Burada style vermek; sonraki sayfa CSS değiştirir
  • Burada createElement çağırmak; daha sonraki bir sayfa yeni düğüm kurar

Bunları götür

  • textContent düz metin yazar, etiket çözümlemez
  • innerHTML etiketleri çözümler ve her çocuğu değiştirir
  • em yazısından sonra textContent Late olur, innerHTML etiketleri hâlâ taşır
  • İkinci bir innerHTML ataması em öğesini siler
  • insertAdjacentHTML("beforeend", ...) işaretleme ekler ve Dock 2 kalır
  • Saat 09:10 kalır, çünkü ona bir şey atanmaz
  • Satır Heron / Late / Dock 2 gate B olur

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 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
Konu 46 / 47
Javascript Ders