DOM ilişkili seçiciler

İlk yazımda genel seçicilerden bahsetmiştim bu yazımda ise DOM üzerinden ilişkilendirilen seçicilerden bahsedeceğim. DOM’daki elementler bir ağaç yapısı ile aile bağlarına benzer bir şekilde bir birlerine bağlıdır. Bu ilişkiden yararlanılarak oluşturulan seçicilere DOM ilişkili seçiciler denir.

Örnek bir HTML kodu verelim;

<div>
  <h1>HTML <em>Hiyerarşisi </em></h1>
  <div><strong>Sitemize</strong> hoş geldiniz <strong class="es-gec">Merhaba</strong> biz <em>sizler için</em> <a href=""> 	bazı önemli konular!</a> hazırladık.</div>
</div>

Yukarıdaki koddaki HTML elemanlarının arasında bir aile yapısına benzer bir yapı vardır. Örneğin h1, em elementinin ebeveyni, diğer bir tanım ile em; h1‘in çocuk elementidir.

Ebevey (parent) seçicisi

Örneğin em elementinin ebeveynini

jQuery ile

$('em').parent();

Javascript ile

document.querySelector('em').parentNode;

h1 sonucu bize verecektir.

Çocuk (children) seçicisi

Alt eleman olarak da tanımladığımız çocuk seçicileri yaklamak için;

jQuery ile

$('h1').children();

Javascript ile

document.getElementsByTagName('h1').childNodes;

text ve em‘i yakalarız.

document.getElementsByTagName('h1').children;

ile sadece em‘i yakalarız.

Torun (Descendants) seçicisi

Bir elemanın alt eleman kümesindeki belirlenen tanıma uygun elemanları yakalamak için kullanılır. Yine CSS’den aşina olduğumuz bir kullanım.

jQuery ile

$('div em');

Javascript ile

document.querySelectorAll('div em');

Bu seçici bize her iki em elemanını verecektir.

En yakın ebeveyn (closest) seçicisi

jQuery kullanırken en yakın ebeveyni yakalamak için closest metodunu kullandığımız oluyor. jQuery’de bunun için bir metot var. Örnek verelim.

jQuery ile

$('a').closest('div');

ile kodumuz içindeki bağlantının en yakın div ebeveyni yakalanmış olur. Javascript’e de yeni gelen bu özellik ile aynı kolaylıkta elemanı yakalayabiliriz.

document.getElementsByTagName('a').closest('div');

Bu yeni bir özellik olmasına rağmen şu an Türkiye’deki desteği %83 seviyesinde. Desteklmeyen tarayıcılar için https://github.com/cferdinandi/getClosest kullanılabilir.

Can I Use element-closest? Data on support for the element-closest feature across the major browsers from caniuse.com.

Kardeş (siblings) seçicisi

Aynı ebeveyne sahip elemanlara kardeş seçiciler denir. Kardeş seçicileri ikiye ayırırız. Bitişik kardeş seçicileri birbiri ardına gelen seçiciler ve genel kardeş seçicileri. jQuery API’sindeki siblings metodu ise bunlardan biraz daha farklıdır. Tanımlanan elemanın seviyesindeki tüm elemanları (kendisi hariç) yakalar. Javascript’te bu durumu direk karşılayan bir metot yoktur. Basit bir fonksiyon ile bu isteği karşılabiliriz.

CSS’deki kardeş seçici mantığı ile ilk kardeşi yakalayıp sonrakileri seçerek jQuery siblings metodunu karşılayabiliriz.

Bu tip javascript’te olmayan metotları kodumuza kazandırdığımız kodları genel erişilebilir bir yerde tutabiliriz.

Genel bir fonksiyon tanımlayıp siblings dizisini oluşturalım. Belirlediğimiz elemanın ebeveyni ve oradanda bu ebeveynin ilk elemanını yakalarız. Sonra bir döngü içinde nextSibling yardımı ile sonraki elemanları yakalayıp bir diziye atarak çözümü oluşturabiliriz.

var getSiblings = function (elem) {
    var siblings = [];
    var sibling = elem.parentNode.firstChild;
    
    for (; sibling; sibling = sibling.nextSibling) {
      // kod gelecek
    }
};

Siblings içinde belirlediğmiz elamanın olmaması lazım. Bunun için bir if kontrolü koymalıyız.

var getSiblings = function (elem) {
    var siblings = [];
    var sibling = elem.parentNode.firstChild;
    
    for (; sibling; sibling = sibling.nextSibling) {
      if (sibling.nodeType !== 1 || sibling === elem) continue;
      siblings.push(sibling);
    }
    return siblings;
};

Son olarakta döngü bittiğinde sonuçları geri göndereceğiz.

jQuery ile

$('div.icerik .es-gec').siblings();

Javascript ile

let elem = document.querySelector('div.icerik .es-gec');
let siblings = getSiblings(elem);

jQuery basitliğinde değil ancak çokta zor olmayan bir yardımcı fonksiyon ile işimizi halletik.

Elemanları hariç tutmak (not)

Bazı elemanları seçimden hariç tutmak için

jQuery ile

$('p strong').not('.es-gec');

Javascript ile

document.querySelectorAll('p strong:not(.es-gec)');

Bu seçim sonrası sadece ilk strong elemnaı seçilmiş olur.

Çoklu eleman seçimi

Birden fazla eleman seçmek istediğimizde

jQuery ile

$('h1, .es-gec, a');

Javascript ile

document.querySelectorAll('h1, .es-gec, a');

yukarıdaki kodlar h1, .es-gec ve link elemanını verecektir.

Sonuç

Bu iki yazılık javascript seçicileri yazımızda gördük ki jQuery’nin en büyük avanatajlarından birisi olan seçiciler konusunda javascript’te yeterli seviyede.

jQuery’nin DOM üzerindeki hakimiyetinin çok fazla olması ve bu hakimiyeti oluşturmak için ürettiği metotlar(nextUntil, nextAll, offsetParent, parentsUntil, prevUntil, prevAll) çoğu zaman kırılgan ve anlışlmaz yapıların çıkmasına neden oluyor. Kırılganlığı önlemek ve daha esnek kodlar yazmak için DOM ilişkili seçicilerin kullanımına dikkat etmeliyiz.

Bazı durumlar için siblings ve closest örneklerinde gördüğümüz gibi yardımcı fonksiyonlar ile kolay çözümlerde oluşturabiliriz.

Kalın sağlıcakla.

Kaynaklar

Daha önce bu özelliği kullanacaktım ancak Chrome desteğini kaldırdığı için kullanım oranı çok düşüktü. Chrome 56’dan itibaren tekrar desteklemeye başladığı için artık kullanabiliriz.

position:sticky tanımlanan eleman kaydırma çubuğu gelene kadar position:relative gibi davranır, kaydırma çubuğu geldikten sonra position:fixed gibi davranır.

Örnek ile daha iyi anlayacağız.

Daha önce bu tip ihtiyaçları position:fixed ile yapıp kaydırma çubuğu gelene kadarki kısmı javascript yardımı ile çözüyorduk. Çünkü postion:fixed olan eleman position:absolute gibi davranıp her halükarda kendini aynı yerde sabitliyor.

Sticky kullanımlarında kaydırma çubuğu, elemana gelene kadar sabit kalsın ama kaydırma çubuğu gelince fixed olsun gibi istekler ile karşılaşıyorduk. Bu istekleri karşılamak için javascript çözümlerine başvuruyorduk. position:sticky güzel ve tek satrılık çözümü süper oldu.

Elemanın sticky olması için dikeydeki kaydırmalarda top / bottom değeri, yataydaki kaydırmalarda left / right değeri tanımlamak gerekiyor.

Desteklemeyen tarayıcılar için çözüm

Bu yazıyı yazdığımda Türkiye için destek %82 idi. Desteği olmayan tarayıcılar için iki seçenek var. Javascript ile destek sağlamak veya desteklemeyenlerde position:relative olarak tanımlamak.

Javascript ile çözüm

Javascript ile çözüm oluşturmak için aşağıdaki çözümlerden biri tercih edilebilir.

CSS ile çözüm

İkinci çözüm desteği olmayanlar için position:relative olarak bırakmak.

.sticky-element{
  position: relative; 
}

@supports(position:sticky){
  .sticky-element{
    position: sticky;
    top: 0px;
  }
}

Sonuç

Kullanıcı ihtiyacı olan bir özellik. Standartlaşması süper. W3C kullanıcı ihtiyaçlarını karşılamada çok yavaş kalıyor. Bu nedenle birçok şeyi olması gerektiği gibi değil çakma çözümler ile yapıyoruz. Umarım zamanla bu değişir.

Tarayıcı desteği

Can I Use css-sticky? Data on support for the css-sticky feature across the major browsers from caniuse.com.

Kaynaklar

jQuery’nin en büyük avantajlarından birisi seçici kullanımının basitiliğidir. CSS seçicilerini javascript’e kazandıran bu kullanım kolaylığı sizzle kütüphanesinden gelir. Javascript bu konuda daha sığ ve beceriksiz kaldı. Tabi sonra işler değişti ve artık aynı yeteneklere sahip.

Seçicilerdeki bu büyük atılımı sağlayan iki özellik var querySelector ve querySelectorAll.

Element.querySelector()

Belirtilen öğenin ilk alt elemanını döndürür.

element = anaElement.querySelector(secici);

Buradaki secici kısmında aklınıza gelecek tüm CSS seçicileri konabiliyor. İşte süperlik buradan kaynaklanıyor. a:before, p[title], p > span, ul li ~ li, vs.

Eğer element bulunamazsa null değeri döner.

Element.querySelectorAll()

Belirtilen öğe grubunun tüm alt elemanlarını döndürür.

elementList = baseElement.querySelectorAll(seciciler);

Buradaki seciciler kısmında aklınıza gelecek tüm CSS seçicileri konabiliyor.

Yukarıdaki özelliğin çoklusu. Bu seçici sonucunda bir dizi element döner.

var el = document.querySelector('#test'); 
var aktifElemanlar = el.querySelectorAll('div.aktif > p');

aktif eleman altındaki tüm paragrafları yakalamamızı sağlar.

Tarayıcı desteği konusunda da çok iyi bir durumdalar. IE8+ destekleri var.

Javascript seçicilerini iki gruba ayıracağız.

  • Ana eleman seçicileri
  • DOM ilişkilerine dayanan seçiciler

Ana eleman seçicileri

CSS derslerinden alışık olduğumuz gibi seçiciler javascript dünyasında da önemli bir yere sahiptir. Kod yazarlarının en çok kullandığı araçlardan biridir seçiciler. Seçiciler ne kadar gelişmiş olursa, bizlere kod yazarken o kadar rahatlık sağlıyor.

Tekil (ID) seçiciler

CSS’den alışık olduğumuz ID seçiciler sayfada bir tane bulunan bir elemanı yakalamak için kullanılır. En büyük avanatjı hızdır.

<div id="trabzon"></div>

Sayfamızda tek bir trabzon id’li elemanı yakalamak için

jQuery ile

var trabzon = $('#trabzon');

Javascript ile

var trabzon = document.getELementById('trabzon');

Tarayıcı desteğinin IE5.5+ olması ne kadar eski olduğunu gösteriyor.

veya

var tarabzon = document.querySelector('#trabzon');

her ne kadar daha yavaş olasa da bir tercih olarak kenarda dursun.

Sınıf (class) seçicileri

Sayfada birden fazla elemanı yakalamk için kullandığımız HTML özniteliğidir.

jQuery ile

var sehir = $('.sehir');

Javascript ile

var sehir = document.getElementsByClassName('sehir');

Bu seçici tüm class=”sehir” tanımlı elemanları bulur ve bize bir dizi olarak döner.

Tüm yeni nesil tarayıcılar ve IE8+ desteği vardır.

veya

var sehir = document.querySelectorAll('.sehir');

her ne kadar daha yavaş olasa da bu da bir tercih.

Etiket (tag) seçicisi

HTML etiketlerini kullanarak seçim yapmamızı sağlar.

jQuery

var katman = $('div');

Javascript ile

var katman = document.getElementsByTagName('div');

Bu seçici tüm <div> etiketli elemanları bulur ve bize bir dizi olarak döner.

IE5.5+ desteği var.

veya

var katman = document.querySelectorAll('div');

her ne kadar daha yavaş olasa da bu da bir tercih.

Öznitelik (attribute) seçicileri

Özellik Seçicileri HTML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre seçim yapmamızı sağlar.

<img src="logo.gif" alt="Logo" width="32" height="41" />

jQuery ile

$('[alt="logo"]');

Javascript ile

document.querySelectorAll('[alt="logo"]');

jQuery benzer bir kullanım var.

Sözde sınıf (Pseudo-class) seçicileri

Aslında bir HTML sınıfı olmamasına rağmen sözde olarak oluşturulan sınıfları yakalamak için kullanılır. CSS’ten alışık olduğumuz bir seçici.

jQuery ile

var metinAlani = $('input:focus');

Javascript ile

var metinAlani = document.querySelectorAll('input:focus');

Süper değil mi?

Sonuç

jQuery’nin elindeki en büyük kozlardan birisi olan kolay seçici kullanımını aynı kolaylık ile javascript ile yapabiliyor olmak sevindirici.

Bir sonraki yazımda DOM ilişkilerine dayanan seçicilerden bahsedeceğim.

Kalın sağlıcakla.

Kaynaklar

jQuery’de en çok kullandığımız özelliklerinden birisi de sınıf tanımlama, silme, varlığını kontrol etme ve toggleClass.

Peki bunların normal javascript’te karşılığı var mı ve bu kadar kolay kullanabiliyor muyuz? Elbette. Sırası ile inceleyelim.

Sınıf (class) ekleme

Seçtiğimiz elemana bir sınıf tanımlamak istediğimizde

jQuery ile

  $el.addClass('aktif');

Normal Js ile

  el.classList.add('aktif');

çok benzer tanımlar.

Sınıf (class) silme

Seçtiğimiz elemana ait sınıfı silmek istediğimizde

jQuery ile

  $el.removeClass('aktif');

Normal Js ile

 el.classList.remove('aktif');

yine çok benzer tanımlar.

Sınıfın varlığını kontrol edelim

Bir çok yerde seçilen eleman atanmış bir sınıfın olup olmadığını kontrol ederiz ve buna göre işlem yaparız.

jQuery ile

 $el.hasClass('aktif');

Normal Js ile

 el.classList.contains('aktif');

benzer kullanım.

Sınıf geçişi (toggle)

Çok tercih edilen bir diğer sınıf işlemedir.

jQuery ile

 $el.toggleClass('aktif');

Normal Js ile

 el.classList.toggle('aktif');

çok kullanışlı bu özelliğin normal js olması süper.

Sonuç

jQuery’den esinlenerek classList API’yi geliştirdiler. Artık aynı yetenekler normal javascript’te de var.

jQuery ile aynı kolaylıkta bir kullanım sağlayan normal js çözümlerini tercih etmek bize hız kazandıracaktır.

IE10 ve sonrası için desteği olan bu özellikleri rahatlıkla kullanabiliriz.

Can I Use classlist? Data on support for the css-line-clamp feature across the major browsers from caniuse.com.

Kaynaklar

Uzun seneler web siteleri kodlarken nimetlerinden yararlandığımız jQuery, mobilin yükselişi ile gündemin ana maddesi olan performans sonrası yerini sorgulatıyor. Acaba normal javascript ile ben jquery’nin yaptıklarını yapamaz mıyım. Aslında Javascript’in hızlı yenilenmesi ile birlikte bir çok özelliği, metodu, fonksiyonu normal javascript ile yapabiliyoruz.

Bu yazı dizisini de şu an üzerinde çalıştığım zingat.com‘da üzerine uzun süredir kafa yorduğumuz performans işlerinin bir sonucu olarak “acaba jQuery kaldırsak daha mı hızlanırız?” sorunundan sonra başladım.

Jquery’nin sağladığı avantajları bilip bunlara karşı çözümler aramalıyız.

  • Kolay yazım
  • Tarayıcı desteği
  • Geniş topluluk desteği
  • jQuery kütüphanelerinin yaygınlığı
  • Dokümantasyon ve makale bolluğu

Kolay yazım

jQuery bir çok işimizi kolaylaştıran seçiciler, manipülasyon işleri ve kullanışlı metotlar sayesinde kod yazanlara kolaylıklar sağlar.

Gelişen javascript sürümleri ile jQuery ile yaptığımız kolaylıkta bu işleri artık javascripte yapabiliyoruz.

Tarayıcı desteği

Farklı tarayıcılar için çözüm oluşturmak için jQuery birebir.

Tarayıcıların otomatik güncellenmesi ile bu sorun büyük oranda azaldı.

Geniş topluluk desteği, jQuery kütüphanelerinin yaygınlığı ve Dokümantasyon ve makale bolluğu

jQuery geliştiren ve çözüm üreten bir çok insan var.

Performans sorunları sonrası bu ibre normal javascript tarafına yöneliyor.

Şimdi jquery ile yaptığımız işleri native javascript ile nasıl yapacağımıza tek tek bakalım.

İlk konu basit olsun. Javascript DOM işleri ile uğraştığımız için javascript’in çalışması için genelde DOM’un yüklenmesini bekleriz.

Meşhur jquery girişi:

	$(document).ready(function() { 
	  // DOM hazır
	});
	

veya kısa şekli

	$(function() {
	  // DOM hazır
	});
	

Peki bu kodu javascript ile nasıl yaparız. İki yöntem var tercih sizin.

DOMContentLoaded

	document.addEventListener('DOMContentLoaded', function() {
	  // DOM hazır
	});
	

onreadystatechange

	document.onreadystatechange = function () {
	  if (document.readyState == "complete") {
	    // DOM hazır
	  }
	}
	

Nasıl güzel değil mi?

Kalın sağlıcakla.

Kaynaklar