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/jonathantneal/closest kullanılabilir.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + 6.2

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

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.