DOM’u anlamak, web geliştirme kariyerinizde çok önemlidir. DOM’da farklı öğeleri nasıl seçeceğinizi bilmelisiniz, böylece içeriklerini okuyabilir veya değiştirebilirsiniz.
DOM geçişi, HTML belgelerinin oluşturduğu ağaç benzeri yapıda nasıl gezinileceğini açıklar. İşte JavaScript ile DOM’da nasıl geçileceğine dair eksiksiz bir kılavuz.
DOM Geçişi Nedir?
Belge Nesne Modeli veya kısaca DOM, bir HTML belgesinin ağaç benzeri bir temsilidir. Web geliştiricisi olarak JavaScript kullanarak bir web sitesiyle etkileşim kurmanıza olanak tanıyan bir API sağlar.
DOM’daki her öğe bir düğüm olarak bilinir. Yalnızca DOM aracılığıyla HTML belgenizin yapısını, içeriğini ve stilini değiştirebilirsiniz.
DOM geçişi (DOM’da yürüme veya gezinme olarak da adlandırılır), DOM ağacındaki düğümleri diğer düğümlerden seçme eylemidir. DOM ağacındaki öğelere kimlik, sınıf veya etiket adlarına göre erişmek için çeşitli yöntemlere zaten aşinasınızdır . Bunu yapmak için document.querySelector() ve document.getElementById() gibi yöntemleri kullanabilirsiniz .
DOM’de daha verimli ve sağlam yollarla gezinmek için birlikte kullanabileceğiniz başka yöntemler de vardır. Tahmin edebileceğiniz gibi, tam bir arama yapmaktansa, haritada zaten bilinen bir noktadan arama yapmak daha iyidir.
Örneğin, üst öğesinden bir alt öğe seçmek, onu tüm ağaçta aramaktan daha kolay ve verimlidir.
Geçilecek Örnek Bir Belge
DOM ağacında belirli bir düğüme erişiminiz olduğunda, onun ilgili düğümlerine farklı şekillerde erişebilirsiniz. Seçtiğiniz düğümden DOM ağacında aşağı, yukarı veya yana doğru hareket edebilirsiniz.
İlk yöntem, en üstteki düğümle (belge düğümü gibi) başlayan ve aşağı doğru hareket eden bir öğe aramayı içerir.
İkinci yol ise tam tersidir: Bir iç öğeden ağacın yukarısına doğru hareket ederek bir dış öğe ararsınız. Son yöntem, belge ağacında aynı düzeydeki başka bir öğeden (yani iki öğe kardeştir) bir öğe aradığınız zamandır.
Göstermek için bu örnek HTML belgesini düşünün:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Sample page</title>
</head>
<body>
<main>
<h1>My Page Title</h1>
<p>Nice caption goes here</p>
<article class=”first__article”>
<h2>List of amazing fruits</h2>
<p>Must eat fruits</p>
<div class=”wrapper-1″>
<ul class=”apple-list”>
<li class=”apple”>Apples</li>
<li class=”orange”>Oranges</li>
<li class=”avocado”>Avocados</li>
<li class=”grape”>
Grapes
<ul>
<li class=”type-1″>Moon drops</li>
<li>Sultana</li>
<li>Concord</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li class=”banana”>Bananas</li>
</ul>
<button class=”btn-1″>Read full list</button>
</div>
</article>
<article class=”second__article”>
<h2>Amazing places in Kenya</h2>
<p>Must visit places in Kenya</p>
<div class=”wrapper-2″>
<ul class=”places-list”>
<li>Maasai Mara</li>
<li>Diani Beach</li>
<li>Watamu Beach</li>
<li>Amboseli national park</li>
<li>Lake Nakuru</li>
</ul>
<button class=”btn-2″>Read full list</button>
</div>
</article>
</main>
</body>
</html>
DOM’yi Aşağıya Geçmek
İki yöntemden birini kullanarak DOM’yi aşağı doğru iletebilirsiniz. Birincisi ortak seçici yöntemidir ( element.querySelector veya element.querySelectorAll ). İkinci olarak, children veya childNodes özelliğini kullanabilirsiniz. Ayrıca lastChild ve firstChild olmak üzere iki özel özellik daha vardır .
Seçici Yöntemleri Kullanma
querySelector() yöntemleri, belirli bir seçiciyle eşleşen bir veya daha fazla öğeyi aramanıza olanak tanır. Örneğin, document.querySelector(‘.first-article’) kullanarak “birinci makale” sınıfına sahip ilk öğeyi arayabilirsiniz . Ve belgedeki tüm h2 öğelerini getirmek için, querySelectorAll yöntemini kullanabilirsiniz: document.querySelectorAll(‘h2’) . querySelectorAll yöntemi, eşleşen öğelerin bir düğüm listesini döndürür ; parantez gösterimini kullanarak her bir öğeyi seçebilirsiniz:
const headings = document.querySelectorAll(‘h2’);
const firstHeading = headings[0]; // selecting the first h2 element
const secondHeading = headings[1]; // selecting the second h2 element
Seçici yöntemlerini kullanırken en önemli nokta, CSS’de yaptığınız gibi seçiciden önce uygun sembolleri kullanmanız gerektiğidir. Örneğin, sınıflar için “.classname” ve kimlikler için “#id”.
Sonucun yalnızca seçili öğenin iç içeriği değil, bir HTML öğesi olacağını unutmayın. İçeriğe erişmek için düğümün innerHTML özelliğini kullanabilirsiniz:
document.querySelector(‘.orange’).innerHTML
Çocukları veya childNodes Özelliklerini kullanma
Children özelliği, doğrudan belirli bir öğenin altındaki tüm alt öğeleri seçer . Aşağıda , eylem halindeki çocuklar özelliğinin bir örneği verilmiştir :
const appleList = document.querySelector(‘.apple-list’);
const apples = appleList.children;
console.log(apples);
Elmaların konsola kaydedilmesi, bir HTML koleksiyonu olarak bir “apple-list” sınıfı ile doğrudan öğenin altında tüm liste öğelerinin bir kümesini görüntüler . Bir HTML koleksiyonu dizi benzeri bir nesnedir, bu nedenle öğeleri seçmek için querySelectorAll’da olduğu gibi köşeli ayraç gösterimini kullanabilirsiniz.
Children özelliğinden farklı olarak , childNodes tüm doğrudan alt düğümleri döndürür (yalnızca alt öğeleri değil). Yalnızca alt öğelerle ilgileniyorsanız, yalnızca liste öğeleri deyin, child özelliğini kullanın .
Özel lastChild ve firstChild Özelliklerini Kullanma
Bu iki yöntem ilk ikisi kadar sağlam değildir. Adlarından da anlaşılacağı gibi, lastChild ve firstChild özellikleri, bir öğenin son ve ilk alt düğümlerini döndürür.
const appleList = document.querySelector(‘.apple-list’);
const firstChild = appleList.firstChild;
const lastChild = appleList.lastChild;
DOM’u Yukarıya Geçmek
parentElement (veya parentNode ) ve en yakın özellikleri kullanarak DOM’da yukarı gidebilirsiniz .
parentElement veya parentNode kullanma
Hem parentElement hem de parentNode özellikleri, seçili öğenin üst düğümünü bir düzey yukarı seçmenize olanak tanır. Kritik fark, parentElement öğesinin yalnızca öğe olan üst düğümü seçmesidir. Öte yandan, parentNode , bir öğe veya farklı bir düğüm türü olmasına bakılmaksızın bir ebeveyn seçebilir.
Aşağıdaki kod örneğinde, “apple-list” içinden “wrapper-1” sınıfına sahip div’i seçmek için parentElement kullanıyoruz:
const appleList = document.querySelector(‘.apple-list’);
const parentDiv = appleList.parentElement;
console.log(parentDiv); // displays div element with class wrapper-1
En yakın Özelliği kullanma
En yakın özellik, belirtilen seçiciyle eşleşen ilk üst öğeyi seçer. Bir yerine birden fazla seviye seçmenizi sağlar. Örneğin, “btn-1” sınıfı seçili bir butonumuz varsa, en yakın özelliği kullanarak ana elemanı aşağıdaki gibi seçebiliriz:
const btn1 = document.querySelector(‘.btn-1’);
const mainEl = btn1.closest(‘main’);
console.log(mainEl); // displays main element
querySelector ve querySelectorAll gibi , en yakın yöntemde uygun seçicileri kullanın .
DOM’yi Yan Yana Geçmek
DOM’yi yana doğru yürümek için kullanılabilecek iki yöntem vardır. nextElementSibling veya öncekiElementSibling kullanabilirsiniz . Aşağıdaki kardeş öğeyi seçmek için nextElementSibling’i ve önceki kardeşi seçmek için öncekiElementSibling’i kullanın .
const orange = document.querySelector(‘.orange’);
const apple = orange.previousElementSibling;
const avocado = orange.nextElementSibling;
Ayrıca , yalnızca öğelerden değil, tüm düğüm türlerinden seçim yapan eşdeğer nextSibling ve BeforeSibling özellikleri de vardır.
DOM Geçiş Özelliklerini ve Yöntemlerini Zincirleyerek Daha Fazlasını Yapın
Yukarıdaki tüm yöntemler ve özellikler, DOM’da herhangi bir düğümü seçmenize olanak sağlayabilir. Ancak bazı durumlarda önce yukarı, sonra aşağı veya yana doğru hareket etmek isteyebilirsiniz. Bu durumda, farklı özellikleri bir arada zincirlemek kullanışlı olacaktır.