DOM API USAGE SERIES
Modern Frontend Framework, DOM kullanım Yöntemleri
DOM kullanımını Javascript, JQuery, Backbone, Ember/Angular, React, Polymer(WebComponent), Svelte nasıl ele aldığını analiz etmek istiyorum.
1. Giriş
Bu yazıyı DOM API Kullanım Yöntemleri yazısı dizisi olarak yazıyorum.
Öncelikle DOM yani Document Object Model konusunu açıklamak istiyorum. DOM HTML sayfasındaki dokümanı temsil eden mantıksal ağaçtır. Aynı zamanda DOM yapısını XML ve SVG modellemekte de kullanırız.
Bu mantıksal ağaçların düğümleri bir takım objeler tutarlar. Bunlara HTMLElements diyoruz
- head
- body
- h1, h2, h3 …
- p, input, div, span …
- table,
Bu objelerin style birleştirilerek render edilmesi sonucunda HTML sayfası istenen şekilde çizilir. Bu yazıda en ilkel şekilde DOM üzerine objelere erişim ve bunun içerisinde String operasyonları ile nasıl ara DOM parçaları oluşturup web sayfasına eklediğimizi anlatacağım.
- Statik DOM
- Etkileşimli Web Sayfaları
- Javascript ile DOM’a Erişim ve Güncelleme
- JQuery ile DOM’a Erişim ve Güncelleme
2. Statik DOM
Aşağıda Statik bir DOM Tree oluşturduk. Bunu yaparken Declerative bir dil ile HTML tag bu sayfamızı tasarladık..
<html>
<body>
<div>
<h1>Selam</h1>
<h2>Dünya</h2>
<span style='color:red'>Red</span>
</div>
</body>
</html>
3. Etkileşimli Web Sayfaları
Ama hayat o kadar’ da basit değil artık bir çok uygulama web sayfası üzerinden çalışıyor ve sayfaların olabildiğince etkileşimli kullanıcıyla iletişimi yüksek bir seviyede olması bekleniyor. Peki bu etkileşimi nasıl sağlayacağız. Bunun için bir çok farklı yöntem var ama en temelinde hepsinin en temelinde DOM API bulunuyor. Bunun üzerinde JQuery, Backbone, Ember, Angular, React, Polymer, Svelte farklı soyutlamalar ile bu DOM API üzerinden erişim sağlayarak kullanıcının DOM ile etkileşim kurmasını sağlıyor.
DOM API Ne Sağlıyor?
- DOM ağacı üzerinden HTML Elemanlarını kontrol etmemizi,
- Form verisini güncellememizi,
- 2 boyutlu resim içeriklerine erişim,
<canvas>üzerine çizim yapmanızı,<audio>ve<video>gibi media elemanlarının yönetimi- Drag-Drop operasyonları
- Diğer API lere bağlantı Web Components, Web Storage, Web Workers, WebSocket, and Server-sent events.
Örneğimiz Oldukça Basit
Kendi örneğinizde oldukça basit bir şeyler yapmayı düşündüm. Counter olsun. Bunu arttırdıkça sayısı yazsın ve “Selam Dünya” bu sayı kadar ekrana yazdırsın.
4. Javascript ile Bu Etkileşimi Nasıl Sağlarız ?
Javascript DOM Document içerisinden getElementById ile DOM içerisindeki objeye ulaşıp bunun içerisinde innerHTML ile bu objenin değerini atama yaparak bu Counter artışını ve Selam yazısının Counter' ın değeri kadar yazmasını sağlarız.
<html>
<head>
<script>
let counter=0;
function handleClick(e){
counter++;
let DOMAsStr='';
for(let i=0;i<counter;i++){
DOMAsStr+=`<div>Selam</div>`
}
document.getElementById("counter").innerHTML=`${counter}`;
document.getElementById("selamContainer").innerHTML=DOMAsStr;
}
</script>
</head>
<body>
<div>
<div>
<button onClick='handleClick()'>Counter</button>
<span id=counter></span>
</div>
<div id='selamContainer'></div>
</div>
</body>
</html>
4. JQuery ile Bu Etkileşimi Nasıl Sağlarız ?
JQuery zamanında IE, Mozilla, Firefox, Chrome gibi tarayıcılarda olan DOM API uyumsuzluklarını , JS kodla DOM erişimini/güncellemeyi standart ve basit bir API üzerinden gerçekleştirmeyi sağlamıştır.
$("#btnCounter") //Single Element Access With Id/Name
$(".btn") //Multiple Element Access With ClassName
innerHTML -> .text(), .html() API kullanılmaya başlandı
$("#btnCounter").click(fn) event bindingAşağıdaki kod JQuery ile daha basit bir şekilde kod geliştirmemizi sağlar.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(function() { //Run When Document Ready
let counter=0;
$("#btnCounter").click(function() {
counter++;
let DOMAsStr='';
for(let i=0;i<counter;i++){
DOMAsStr+=`<div>Selam</div>`
}
$("#counter").text(counter);
$("#selamContainer").html(DOMAsStr);
});
});</script>
</head>
<body>
<div>
<div>
<button id='btnCounter'>Counter</button>
<span id=counter></span>
</div>
<div id='selamContainer'></div>
</div>
</body>
</html>
5. Gelecek Yazılarımda DOM konusunda Neleri İşleyeceğim ?
Sonrasında sırası ile
- Template Rendering öncelikle logic-less yani template içerisinde kod yazmadan template rendering olan Musteche.JS bahsediyorum.
Handlebar.JS kütüphanelerinden örnekler oluşturacağım. Bu aşamada String işlemlerinden nasıl kurtulmaya çalıştığımızı anlatacağım. - Backbone ile MV* mimarisini nasıl oluşturmaya çalışıldığını Underscore template, model, view, collection gibi kavramları anlatmaya çalışacağım. (Backbone.JS -1, BackboneJS)
- Sırası ile Ember ve Angular yapısından HTML Tagları ile bindinglerden bahsedeceğim.
- React JS DOM altyapısını Virtual DOM, JSX ile birlikte nasıl kullandığını analiz edeceğiz
- React Hook yapısının neden çıktığının DOM kullanımı üzerinde bir etkiden çıkıp çıkmadığını analiz edeceğiz.
- Svelte’nin nasıl çalıştığını analiz edeceğiz.
- HTML Standartlarında gelen ShadowDOM, CustomElement, HTML Template standartlarından bahsedeceğim.
- WebComponent ve Polymer kütüphanesinden bahsedeceğim.
- Template Literals ile JS String yapıları oluşturma hangi düzeye geldiğini inceliyor olacağız.
Örnek Kodlar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (DOM API Kullanımı) erişmek için bu linke tıklayabilirsiniz.
Bu yazının devamı veya yazı grubundaki diğer yazılara (Web API Kullanımı) erişmek için bu linke tıklayabilirsiniz.
