⚡ JavaScript: DOM'u Kim Değiştiriyor

JavaScript: DOM'u Kim Değiştiriyor: JavaScript, binadaki elektrik ve otomasyon sistemidir: sayfayı sonradan CANLI hale getiren, butona basınca bir şeyler olmasını sağlayan, sunuc

JavaScript, binadaki elektrik ve otomasyon sistemidir: sayfayı sonradan CANLI hale getiren, butona basınca bir şeyler olmasını sağlayan, sunucudan veri gelince yeni BugCard'lar üreten güç budur. Neden testerı en çok ilgilendiren katman JS'tir? Çünkü DOM'u değiştiren odur — element bir an yoktur, fetch bitince belirir; bu yüzden "elementi bekleme" (wait) gerekir ve `sleep` yanlış cevaptır. Java analojisi: DOM ana thread'de senkron kurulur ama fetch asenkron döner — bir CompletableFuture'ın sonucunu beklemeden okumaya çalışmak gibi. QA bağlamında: locate timing sorunlarının kökü JS'in asenkronluğudur; doğru refleks sabit süre uyumak değil, elementin varlığını/görünürlüğünü koşullu beklemektir.

🧱 D1. DOM Manipülasyonu: createElement, appendChild, innerHTML

JS'in DOM'u değiştirmesi, bir İNŞAAT USTASININ binaya SONRADAN oda eklemesi gibidir: `document.createElement('li')` yeni bir "tuğla" hazırlar ama henüz hiçbir yere bağlı DEĞİLDİR — sadece bir JS değişkeninde durur; `appendChild` bu tuğlayı GERÇEKTEN duvara (DOM ağacına) ekler. Peki neden bazen `element.innerHTML = htmlString` yerine `createElement`+`appendChild` tercih edilir? Çünkü `innerHTML` mevcut alt ağacı TAMAMEN yok edip sıfırdan kurar — buna bağlı event listener'lar ve DOM referansları SESSİZCE geçersiz hale gelir (sinsi bir bug kaynağı). Java analojisi: `new Foo()` ile bir nesne yaratmak (createElement) ile onu bir koleksiyona `list.add(foo)` ile eklemek (appendChild) arasındaki fark gibi — var OLMAK ile sistemin bir PARÇASI olmak farklı adımlardır. QA bağlamında: `createElement` çağrıldı ama `appendChild` henüz çalışmadıysa, o elementi locate etmeye çalışmak HER ZAMAN başarısız olur — bu, D3'teki timing dersinin temelidir.

Adım Adım: `createElement` ile `appendChild` Arasındaki Boşluk

`document.createElement('li')`

Bellekte YENİ bir node oluşturulur ama bu node HİÇBİR YERE bağlı değildir — DOM ağacının bir parçası değildir.

Bu anda locate etmeye çalışsan…

`document.querySelector('li')` bu yeni node'u ASLA bulamaz — o sadece bir JS DEĞİŞKENİNDE durur, ağaçta değil.

`parent.appendChild(newLi)`

Node artık GERÇEKTEN DOM ağacına eklenir — bu satır çalışana kadar node "var ama görünmez" durumdaydı.

Artık locate edilebilir

`appendChild` çalıştıktan SONRA `querySelector`/Playwright locator bu elementi bulabilir.

`innerHTML` farklı bir risk taşır

`innerHTML = htmlString` mevcut alt ağacı TAMAMEN yok edip yeniden kurar — eski event listener'lar ve locator referansları SESSİZCE geçersiz olur.