Yükleniyor...

Öğe oluşturma

Mutfaktaki mantar panoda zaten bir kâğıt var: milk. Liste #board. O kâğıt, id değeri milk olan bir li. İşaretleme tek satır, bu yüzden satır sonundan boş bir metin düğümü yok.
tea, bread ve eggs de gelsin istiyorsun. Etiketi bir dizgeden kurma. document.createElement("li") sana belgede henüz olmayan yeni bir li verir. parentElement null olur. document.body.contains false olur. board.children.length 1 kalır, çünkü panoda yalnız milk vardır.
textContent = "tea" sözcüğü o nesnenin üstüne yazar. Sayfaya asmaz.
board.append(tea) onu listenin sonuna iliştirir. Çağrının sonucu undefined olur. Düğümü geri vermez. appendChild aynı düğümü verir; bu sayfa append kullanır. prepend ekmeği başa koyar. insertBefore(eggs, milk) yumurtayı milk’in hemen önüne koyar; milk zaten panonun çocuğudur. Sıra bread, eggs, milk, tea olur. children.length 4 olur.
Yalnız taze pano üzerinde ayrı bir deneme: createTextNode("salt"). Bu bir metin düğümüdür, li değil. İliştirirsen children.length 1 kalır. childNodes.length 1’den 2’ye çıkar. nodeType 3 olur. Son öğe hâlâ milk’tir. Sayfa demosu tuzu eklemez.
Panonun altındaki satır şudur: bread / eggs / milk / 4. tea listede vardır, bu satırda yoktur. 4, öğe sayısıdır. milk metni milk kalır. Burada CSS özelliği yazmazsın.

Yeni düğümler, yeni bir boya katı değil

Önceki sayfa boya kartına style, setProperty, classList ve cssText yazdı. Düğüm kurmadı. Ondan önceki sayfa sözcükleri textContent, innerHTML ve insertAdjacentHTML ile değiştirdi. Burada style atamazsın, HTML dizgesini ayrıştırmazsın ve milk sözcüğünü yeniden yazmazsın. getElementById sana yalnız panoyu ve milk kâğıdını verir. Yeni satırlar createElement ile gelir.

Her yeni düğüm nereye oturur

Pano tek bir li ile başlar: milk. Satırları sırayla oku. Tuz satırı, tea, bread ve eggs yokken taze pano üzerindeki yan denemedir. Sayfa demosu insertBefore ile durur ve tuzu iliştirmez.

📊 Her yeni düğüm nereye oturur

Çağrı Yeni düğümün yeri Öğe çocukları Kolay karışan
createElement("li") hiçbir yerde; parentElement null hâlâ 1, milk kâğıt zaten panoda sanmak
textContent = "tea" hâlâ hiçbir yerde hâlâ 1 sözcüğün kendisi bir li ekler sanmak
append(tea) sonda; sonuç undefined 2: milk, sonra tea append düğümü geri versin diye beklemek
prepend(bread) başta 3: bread, milk, tea prepend ile append yer değiştirmek
insertBefore(eggs, milk) milk’in hemen önü 4: bread, eggs, milk, tea panonun çocuğu olmayan bir referans
append(createTextNode("salt")) taze panoda milk’ten sonra metin düğümü, li değil hâlâ 1 children.length değerinin 2 olması

createElement düğümü bellekte kurar. Bir metot onu yerleştirene kadar pano değişmez. children yalnız öğe çocuklarını sayar. Metin düğümü childNodes içindedir, children içinde değildir. append ve prepend undefined verir. appendChild verdiğin düğümü geri verir. append düğüm ya da dizge alır; dizge metin düğümü olur. appendChild düğüm alır, dizgede hata fırlatır. insertBefore o babanın çocuğu olan bir referans ister. null verirsen düğüm sona gider, append ile aynı fikir. Bu sayfa milk geçirir, null değil. Panoda duran bir düğümü yeniden append edersen yer değiştirir. Kopyalanmaz.

Yeni li henüz panoda değil

Dosya tek satırlık listeyle açılır. Henüz bir şey kurulmadı. İlk dört okuma yeni düğümü ve panoyu sorar, metinden önce ve iliştirmeden önce.

Ayrı kâğıt

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
console.log(tea.parentElement);
console.log(document.body.contains(tea));
console.log(board.children.length);
console.log(tea.textContent);

Çıktılar: null, false, 1 ve boş dizge. Tarayıcıda gerçek bir li nesnesi vardır. Babası yoktur. Tek öğe çocuğu hâlâ milk’tir. milk sözcüğü o eski kâğıda aittir, yenisine değil.

tea sözcüğü onu hâlâ listeye sokmaz

textContent elindeki düğümün metnini değiştirir. İliştirme yöntemi değildir. Panonun çocuk listesi büyümez.

Metin, hâlâ ayrı

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
console.log(tea.textContent);
console.log(document.body.contains(tea));
console.log(board.children.length);

Çıktılar: tea, false ve 1. Sözcüğü nesneden okursun. Sayfa hâlâ yalnız milk gösterir. Düğüm belgenin altında olmadığı için contains false olur.

append çayı sona koyar

append düğümü son çocuk yapar. fromAppend çağrının sonucunu tutar; bu undefined olur, li değil. Çağrıdan sonra baba panodur ve son öğenin metni tea olur. Sıra: milk, sonra tea.

Çayı iliştir

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
let fromAppend = board.append(tea);
console.log(fromAppend);
console.log(tea.parentElement === board);
console.log(board.lastElementChild.textContent);
console.log(board.children.length);

Çıktılar: undefined, true, tea ve 2. appendChild(tea) aynı düğümü yazardı. Bu parça appendChild çağırmaz. milk hâlâ ilk öğe çocuğudur.

prepend ve insertBefore sırayı kurar

Bu parça yine özgün panodan başlar ve üç yerleştirme yapar. prepend, tea zaten sondayken çalışır, bu yüzden bread ilk çocuk olur. insertBefore(eggs, milk) referans olarak milk kullanır, eggs bread ile milk arasına oturur. Dört metin: bread, eggs, milk, tea.

Ekmek ve yumurtayı yerleştir

javascript 
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
console.log(board.children[0].textContent);
console.log(board.children[1].textContent);
console.log(board.children[2].textContent);
console.log(board.children[3].textContent);

Çıktılar: bread, eggs, milk ve tea. children.length 4 olur. İndeks 1 eggs olur, milk değil. milk 0. indeksten 2. indekse kayar, çünkü önüne iki kâğıt oturmuştur. milk metni hâlâ milk sözcüğüdür.

Metin düğümü children içine girmez

Bu bloğu taze panoda çalıştır, özgün tek satırlık listede, sayfa betiğinden sonra değil. createTextNode metin düğümü kurar. nodeType 3 metin demektir. nodeType 1 öğe demek olurdu. children onu saymaz, uzunluk 1 kalır. childNodes onu sayar, uzunluk 1’den 2’ye çıkar. Son öğe hâlâ milk kâğıdıdır. Listede salt sözcüğünü görebilirsin; yine de li değildir.

Tuz metin düğümü

javascript 
let board = document.getElementById("board");
let salt = document.createTextNode("salt");
board.append(salt);
console.log(salt.nodeType);
console.log(board.children.length);
console.log(board.childNodes.length);
console.log(board.lastElementChild.id);

Çıktılar: 3, 1, 2 ve milk. append içine dizge verirsen, örneğin board.append("salt"), o da metin düğümü olur. li olmaz. Aşağıdaki sayfa demosu bu satırı içermez.

Panonun altında bir satır

Betik body sonundadır, liste durduktan sonra. tea’yi sona iliştirir, bread’i öne koyar, eggs’i milk’ten önce yerleştirir. salt kurmaz. 0, 1 ve 2. indeksleri ve öğe sayısını yazar. Dördüncü metni, tea’yi, satıra yazmaz.

Sayfa demosu — pano

html 
<!DOCTYPE html>
<html>
<head>
<title>create elements — page</title>
</head>
<body>
<ul id="board"><li id="milk">milk</li></ul>
<p id="line">…</p>
<script>
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
document.getElementById("line").textContent =
board.children[0].textContent + " / " +
board.children[1].textContent + " / " +
board.children[2].textContent + " / " +
board.children.length;
</script>
</body>
</html>

Satır bread / eggs / milk / 4 olur. Listenin kendisi bread, eggs, milk, tea’dir. Satır üçüncü öğede durur, sonra uzunluğu yazar; tea son parça değildir ve son parça bir sözcük değildir. salt yoktur. milk kâğıdının metni hâlâ milk’tir. Sonraki sayfa olaylardır. Bu düğümleri kurmanın başka bir yolunu getirmez.

Panoyu sen kontrol et

  1. li oluştur ve parentElement, document.body.contains, children.length, textContent oku. Değerler: null, false, 1 ve boş dizge.
  2. Metni tea yap ve metni, contains değerini, uzunluğu oku. Değerler: tea, false ve 1.
  3. tea’yi append et. Çağrı sonucunu, babanın pano olup olmadığını, son öğenin metnini ve uzunluğu oku. Değerler: undefined, true, tea ve 2. Sonra sıra parçasını çalıştır ve bread, eggs, milk, tea oku.
  4. Taze panoda tuz metin düğümünü append et. nodeType, children.length, childNodes.length ve son öğenin id değerini oku. Değerler: 3, 1, 2 ve milk. Sayfa satırı: bread / eggs / milk / 4.

Bu panodaki sürçmeler

Liste hâlâ milk ile açılır. Çağrı yanlış türde bir eklemeydi.

  • createElement("li") hemen tea’yi panoda göstersin diye beklemek
  • textContent = "tea" ile children.length artsın diye beklemek
  • append öğesinin li vermesini beklemek; onu appendChild yapar
  • appendChild içine dizge vermek; dizge append içindir ve orada metin düğümü olur
  • insertBefore çağırmak, referans panonun çocuğu değilken
  • Tuz metin düğümünü children içinde saymak
  • Yeni satırı innerHTML ile kurmak; HTML değiştiren sayfa işaretlemeyi ayrıştırıyordu
  • Burada style.color yazmak; önceki sayfa CSS yazıyordu
  • Satırı bread / eggs / milk / tea diye okumak
  • Burada remove veya cloneNode çağırmak; bu sayfa yalnız üç kâğıdı ekler

Bunları yanında götür

  • createElement("li") ayrı bir kâğıt kurar; parentElement null olur ve children.length 1 kalır
  • textContent = "tea" sözcüğü yazar ve düğümü panonun dışında bırakır
  • append(tea) çayı sona koyar ve çağrının sonucu undefined olur
  • prepend(bread) ve insertBefore(eggs, milk) sırayı bread, eggs, milk, tea yapar
  • Taze panoda createTextNode("salt") children.length değerini 1 tutar ve nodeType olarak 3 gösterir
  • Satır bread / eggs / milk / 4 olur ve milk metni milk kalır

🧠 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 48 / 48
Javascript Ders