DOM helper

DOM nedir?

Document Object Model’in kısaltılmışı olan DOM, asla bir dil olmayıp, dilleri barındıran bir standart olarak tanımlanmaktadır.

Programlama dillerinin Object-Orientated olarak HTML ile anlaşması için HTML’i nesneler bütününe çevirecek bir ara standart gereklidir. DOM da tam bu noktada işe el atmaktadır. DOM, HTML ile programlama dilleri arasında bir standart oluşturarak bu dillerin HTML den bilgi alıp, bilgi vermesine yardımcı olur. DOM, Nesneler ve özelliklerden oluşur.

DOM’da HTML ile hazırladığınız sayfa, belge; bu belgenin içine yerleştirdiğiniz her türlü öğe ise nesne olarak adlandırılır.

DOM da nesnelerin birer öğe (element) olarak kullanılabilmesi için hiyerarşik bir düzen izlenerek çağrılmaları gerekir.HTML’deki her bir elamanın birbiri ile hiyearşik bir yapı oluşturması ile oluşur.

DOM Helper Fonksiyonlar

Dom'un ne olduğu bilmeyen arkadaşlar öğrendiğine göre şimdi tilpark içerisindeki yardımcı Dom fonksiyonlarını inceleye biliriz.

addClass()

addClass() fonsiyonu ile html elementi  içerisinde seçtiğiniz nesne'ye class ekler.

Örnek: 

<div id="element"></div>

addClass(document.getElementById('element'), 'thatClass');

 Sonuç:

<div id="element" class="thatClass"></div>

removeClass()

removeClass() fonsiyonu ile html elementi  içerisinde seçtiğiniz nesne'deki girilen class'ı siler.

Örnek: 

<div id="element" class="container thatClass"></div>

removeClass(document.getElementById('element'), 'thatClass');

 Sonuç:

<div id="element" class="container"></div>

hasClass()

İsminden de anlayacağınız üzere bir elemen içersinde aranan class var mı sorgusunu yapar. Döndüreceği değer trueyada false'dır.

Örnek:

<div id="element" class="thatclass">

</div>

if ( hasClass(document.getElementById('element'), 'thatclass') ) {
    return true; // aranan class bulundu!
} else {
    retun false; // aranan class bulunamadı!
}

getNextSiblings()

jQuery'deki next() fonksiyonuna benzer. Girilen Element'den sonra gelen nesneleri verir.

Örnek:

// ilk veri alınacaksa
getNextSiblings(element)[0] // bir sonraki nesne

getJSON()

JQuery'deki getJSON fonksiyonu'ile aynı mantıkta çalışıyor. Gönderilen url'deki json sayfasının verilerini JavaSript object olarak callback ile geri gönderiri.

getJSON('http://jsonfile.com/jsonfile.json', function(data) {
    console.log(data);
});

getOffset()

getOffset() fonksiyonu ile girilen elementtin pencerin üstüne ve soluna olan uzaklığını verir.

Kullanım:

getOffset(element).top // nesne'nin sayfanın üstüne olan uzaklığını verir
getOffset(element).left // nesne'nin sayfanın soluna olan uzaklığını verir

Örnek:

window.onscroll = function () {
    if ( getOffset(element).top > window.scrollTop ) {
        if ( !hasClass(element, 'active') ) {
            addClass(element, 'active'); // eğer pencerenin scrollTop değeri elementin konumunun pencerenin üst kısmana uzaklığından fazla ise active class'ı ekle.
        }
    }
}

parent()

Bu fonksiyon ile verilen element'in üst element'ini querySelector ile bulana kadar döngü içerisinde arar. İlk bulunan element ise fonksiyon içerisinde döndürülür.

parent(element, '.liste');

getXHR()

getXHR fonksiyonu genel olarak XMLHttpRequest özelliğinin gerekli işlemlerini parametreler ile kolay bir şekilde gerçekleştirilmek için kullanılır.

İki parametre ile çalışır. İlk parametre (object) olarak gönderirilir. İkinci parametre ise gönderilen değerler ile alınan sonucu veriir.

method, url, send parametreleri ile getXHR fonksiyonundan veri alınabilir. 

Kullanım:

getXHR({'method': 'GET', 'url': 'http://url.com', 'send': ''}, function (data) {
    if ( data != 'empty' && data != false ) {
        console.log(data);
    } else { console.log('veri boş veya sayfa açılamadı!'); } 
});

[js-onload]

js-onload html elementlerindeki attribute özelliğini kullanacak html tag'ında javascript fonksiyonu çalıştırmaya yarar.

Bu attribute safya okunduğu andan itibaren çalışacaktır. Böylelikle kısa bir fonksiyon yazarken ekstra olarak script taglarını açmaya gerek kalmayacak ve kod üzerinde belli bir düzeni korumamıza olanak sağlayacaktır.

Kullanım:

<div id="editor" js-onload="editor('#editor')">

</div>

js-onload nasıl çalışıyor?

Oldukça basit. JavaScript'deki eval() fonksiyonu gelen stringleri JavaScript kodu olarak okuyor ve çalıştırıyor.

Js-onload'ın html elementlerine uygulandığı kod satırı.

document.addEventListener("DOMContentLoaded", function(event) {
// js-onload attr'si içerisindeki string'i function olarak comvert edip çalıştırıyoruz
  var jsOnload = document.querySelectorAll("[js-onload]");

  for (var key in jsOnload) {
    if ( typeof jsOnload[key] === 'object' ) { 
        eval(jsOnload[key].getAttribute('js-onload'));
    }
  } // endfor
});

Şu anda tilpark içerisindeki helper DOM'lar bu kadar. Yeni fonksiyonlar eklendikçe bu sayfa üzerinden fonksiyonlara ulaşabilirsiniz.