yoklateknik mülakat
GelişimGeçmiş

Frontend Dom Browser Apis Mülakat Soruları

75 doğrulanmış Frontend Dom Browser Apis mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

Dom Browser ApisZorluk 1
document.getElementById('menu') ile document.querySelector('#menu') karşılaştırıldığında ne döner?
  • agetElementById, id'si eşleşen her element'i içeren bir NodeList döner; querySelector ise document'te bulmayı denk getirdiği yalnızca ilk element'i döner
  • bgetElementById CSS selector ile arar, querySelector ise yalnızca bir element'in id'sine göre arayabilir
  • cİkisi de ilk eşleşen element'i ya da null döner; ancak getElementById bir id alır, querySelector herhangi bir CSS selector alır✓
  • dgetElementById artık querySelector lehine deprecated'dir, bu yüzden yeni kodda hiç kullanılmamalıdır
Açıklama:getElementById id'ye göre tek bir element arar ve o element'i ya da null döner; querySelector herhangi bir CSS selector'a eşleşen ilk element'i (yani '#menu' de çalışır) ya da null döner. Hiçbiri NodeList dönmez (a) — o querySelectorAll'dır. getElementById deprecated değildir (d); düz id aramaları için gayet idiomatik ve biraz daha hızlıdır.
Dom Browser ApisZorluk 1
Sayfadaki card class'ına sahip tüm elementlere ihtiyacın var. Hangi çağrı hepsini verir?
  • adocument.querySelectorAll('.card'); eşleşen tüm elementlerin bir NodeList'ini döner✓
  • bdocument.querySelector('.card'); o class'a sahip her element'i döner
  • cdocument.getElementById('.card'); elementleri class adına göre seçebilir
  • ddocument.querySelectorAll('card'); nokta atılırsa class attribute'una eşleşir
Açıklama:querySelectorAll selector'a eşleşen her element'in (static) bir NodeList'ini döner; querySelector (b) yalnızca ilk eşleşmede durur. Class için baştaki nokta zorunludur (d) — noktasız 'card' bunun yerine <card> tag'lerine eşleşir; getElementById (c) ise class selector değil bir id alır.
Dom Browser ApisZorluk 2
element.addEventListener('click', handler), HTML'de inline bir onclick attribute'u vermeye kıyasla neden genellikle tercih edilir?
  • aÇünkü inline onclick, argument alan handler fonksiyonlarını çağıramaz
  • bÇünkü addEventListener, aynı event için birbirini ezmeden birden çok bağımsız handler ekleyebilir✓
  • cÇünkü addEventListener handler'ını sayfa yüklenmeden önce çalıştırır, onclick ise sonrasını bekler
  • dÇünkü inline onclick yalnızca capturing fazında çalışır, bubbling sırasında asla çalışmaz
Açıklama:addEventListener, tek bir element'te tek bir event için birden çok listener'ın bir arada var olmasını sağlar ve davranışı markup'ın dışında tutar (separation of concerns). Inline onclick (ya da .onclick property'si) tek bir handler tutar; yenisini atamak eskisini siler. Inline handler'lar argument geçebilir (a) ve iki mekanizma da varsayılan olarak bubbling fazında çalışır (d).
Dom Browser ApisZorluk 2
element.textContent ile element.innerText okumak arasındaki pratik fark nedir?
  • atextContent çevredeki HTML tag'lerini string'in bir parçası olarak döner; innerText ise o tag'lerin her birini önce senin için özenle ayıklar
  • binnerText her zaman daha hızlıdır çünkü onu okumak tarayıcıda hiçbir layout işi tetiklemez
  • cTam eş anlamlıdırlar — tarayıcı ikisi için de birebir aynı string'i hesaplayıp döner
  • dinnerText render edilmiş, görünür metni verir ve gizli elementleri atlar; textContent ise her node'un ham metnini döner✓
Açıklama:innerText layout'a duyarlıdır: kullanıcının aslında gördüğüne yakını verir, bu yüzden display:none metni yok sayar ve onu okumak tarayıcıyı layout hesaplamaya zorlayabilir. textContent gizli olsun olmasın her node'un birleştirilmiş metnini döner ve daha ucuzdur. Hiçbiri HTML tag'i dönmez (a) — tag string'ini almak innerHTML'in işidir.
Dom Browser ApisZorluk 1
DOM event modelinde, bir <div> içine yerleştirilmiş bir button'a tıkladığında 'bubbling' ne demektir?
  • aTıklama önce dıştaki <div> üzerinde ele alınır ve ancak ondan sonra içine yerleştirilmiş button'a ulaşıp orada çalışır
  • bEvent önce button'da çalıştıktan sonra aynı event atalarına (<div>, sonra daha yukarı) doğru çıkar✓
  • cEvent yalnızca button'un kendisinde çalışır ve hiçbir atasına ulaşmaz
  • dTarayıcı, bir handler false döndürene kadar event'i button'da tekrar tekrar çalıştırır
Açıklama:Bubbling, event'in önce gerçek target'ta (button) ele alınıp ardından her atası üzerinden yukarı doğru yayılması demektir; böylece <div>'deki bir listener da çalışır. Önce atada çalışmak (a) daha erken olan capturing fazını tarif eder, bubbling'i değil. Varsayılan olarak event atalara ulaşır, dolayısıyla (c) yanlıştır.
Dom Browser ApisZorluk 3
<div id="outer">
  <button id="inner">Click</button>
</div>

outer.addEventListener('click', () => log('outer'), true);  // capture
inner.addEventListener('click', () => log('inner'));        // bubble

Button'a tıklandığında handler'lar hangi sırayla log basar?
  • aÖnce inner sonra outer; çünkü aslında tıklanan element her zaman kendi handler'ını atalarının herhangi biri çalışmadan önce çalıştırır
  • bÖnce outer, sonra inner, sonra tekrar outer; çünkü her iki fazda da kayıtlıdır
  • cÖnce outer sonra inner; çünkü atadaki capturing listener, target'ın bubbling listener'ından önce çalışır✓
  • dYalnızca inner; çünkü capturing listener sıradan bir tıklamada çalışmaz
Açıklama:Üçüncü argument true, outer'ın listener'ını capturing fazı için kaydeder; bu faz target'a ulaşmadan önce yukarıdan aşağıya iner — yani önce outer loglar, sonra event inner'a ulaşır. outer varsayılanı (bubbling) kullansaydı sıra inner sonra outer olarak değişirdi (a). outer tek bir fazda bir kez kayıtlıdır, bu yüzden bir kez çalışır (b).

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla