Photo by Jakob Owens on Unsplash

DOM API USAGE SERIES

Modern Frontend Framework, DOM kullanım Yöntemleri

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>
Static DOM Tree
Static DOM Tree Sonuç

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?

Ö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>
Sonuç

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 binding

Aş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

Ö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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store