Belge Nesne Modeli (DOM), HTML belgesinin yapısal gösterimidir. DOM, tarayıcının internetteki her web sayfası için oluşturduğu bir düğüm ağacıdır.

DOM nesne yönelimlidir. DOM’daki her öğenin JavaScript kullanarak erişebileceğiniz kendi öznitelikleri ve şekilleri vardır.

Bu öğretici makalede, bir web sayfasının öğelerine erişmek için DOM seçici işlevlerinin iyi mi kullanılacağını öğreneceksiniz.

DOM Öğelerine Iyi mi Erişin

Bir web sayfasının en üst düzey DOM öğesine genel belge nesnesi vesilesiyle erişebilirsiniz. Mesela, aşağıdaki şeklinde bir web sayfanız var ise:

Welcome


Lorem ipsum dolor sit amet consectetur adipisicing seçkin. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.



About


Lorem ipsum dolor sit amet consectetur adipisicing seçkin. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.



Articles


Article Title One


Lorem ipsum dolor sit amet consectetur adipisicing seçkin. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.

 Read More 


Article Title Two


Lorem ipsum dolor sit amet consectetur adipisicing seçkin. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.

 Read More 


Article Title Three


Lorem ipsum dolor sit amet consectetur adipisicing seçkin. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.

 Read More 


Article Title Four


Lorem ipsum dolor sit amet consectetur adipisicing seçkin. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.

 Read More 

Yazarak belge tarayıcı konsolunuzda enter tuşuna basmak aşağıdaki çıktıyı üretecektir:

Konsolunuzdaki çıktı etkileşimlidir. Buraya tıklayabilirsiniz. baş ve gövde bu tarz şeyleri genişletmek için öğeler. Bunu yapmak aşağıdaki çıktıyı üretecektir:

Her bölüm öğesi etiketi de genişletilebilir. Bir web sayfasının yapısına bağlı olarak, öğeler daha çok öğeyi ortaya çıkarmak için genişlemeye devam edecektir. Bu size DOM’un yapısını daha net anlamanızı elde edecektir.

İlgili: Web Sitelerinin Gizli saklı Kahramanı: DOM’un Anlaşılması

Belge nesnesinin hususi bir özelliği vardır, gövde, beden öğesini temsil eder. Bundan dolayı, beden öğesine erişmek için konsola aşağıdakileri yazabilirsiniz:

document.body

Bu, aşağıdaki çıktıyı üretecektir:

Sadece bu, nesne özelliklerini kullanarak gidebileceğiniz en uzak yerdir. Her sayfanın bir kafası ve vücudu vardır, sadece aksi takdirde benzersizdir. Şu demek oluyor ki yazma document.body.section yada benzer bir şey istediğiniz şeklinde çalışmaz. Bunun yerine, belirli öğelere erişmek için belge nesnesini çağırabileceğiniz yöntemler vardır.

DOM Eleman Seçicileri Nedir?

DOM öğesi seçicileri, bir web sayfasındaki öğelere erişmek için belge nesnesinde kullanabileceğiniz bir JavaScript şekilleri grubudur. DOM öğesi seçicilerinin tek ve çoklu seçiciler olmak suretiyle iki kategorisi vardır.

Bu işlevler CSS seçicilerine benzer şekilde davranır. Öğeleri etiket adlarına yada kimlik ve derslik özniteliklerine gore almanıza izin verir. Herhangi bir CSS seçici kullanarak öğeleri bile getirebilirsiniz.

İlgili: CSS Seçicilerini Kullanarak Web Sayfasının Bir Bölümünü Hedefleme

Tek unsur seçicileri şunlardır:

• getElementById()
• querySelector()

Birden oldukça unsur seçici şunlardır:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

Kullandığınız DOM öğesi seçicisi, erişmeye çalıştığınız unsur(ler)e bağlıdır.

Tek DOM Öğesi Seçicilerini Kullanma

Çoğunlukla JavaScript uygulamalarında seçiciler görürsünüz. Konsoldan uzaklaşalım. Bir JavaScript dosyası oluşturun ve aşağıdaki komut dosyası etiketini kullanarak HTML dosyanıza bağlayın:

Burada src kıymeti JavaScript dosyanızın adıdır. Bu komut dosyası etiketini kapanış beden etiketinden derhal ilkin yerleştir. .

Bu, bir sonraki getElementById() yöntemi, kimliğin kıymetini kullanarak bir web sayfasındaki tek bir öğeye erişim sağlar. Yukarıdaki HTML belgesinde kimlikleri olan birkaç unsur vardır. Hedef almak için Div “makale-3” kimliğine haiz unsur JavaScript dosyanıza aşağıdaki kodu ekleyebilirsiniz:

value = document.getElementById('article-3')

Şimdi div elemanı ile madde-3 Kimlik ve ilgili tüm özelliklere kıymet değişken. Yazdırabilirsiniz. kıymet aşağıdaki kod satırını kullanarak konsola değişken:

console.log(value)

Div öğesine atanan derslik adını ve iç HTML şeklinde öteki mühim öznitelikleri görürsünüz.

Öteki tek unsur seçici, querySelector(). Bu işlev, herhangi bir CSS seçici dizesini geçirebileceğiniz için daha oldukça yönlüdür. Sadece, aynı anda yalnızca bir unsur seçmek için kullanabilirsiniz.

Mesela, yukarıdaki HTML düzeninde tek bir derslik vardır: makaleler. Dört div öğesi bu sınıfı kullanır, sadece querySelector() işlevi yalnızca “articles” sınıfına haiz ilk öğeyi döndürür.

QuerySelector() Sınıfını Kullanma

Komut dosyanızın sonuna aşağıdaki kodu ilave edin:

value = document.querySelector('.articles')
console.log(value)

Bu yalnızca ilk Div “articles” sınıfına haiz unsur. Seçiciyi CSS seçiciyle aynı şekilde belirttiğinize dikkat edin. CSS’de, baştaki nokta bir derslik adı belirtir.

querySelector() Kimliğiyle kullanma

value = document.querySelector('#article-3')
console.log(value)

Bu kod, “makale-3” kimliğine haiz tek öğeyi döndürür, üçüncü Div “articles” sınıfına haiz unsur. Gene, seçici mısra standart CSS sözdizimini kullanır ve # simgesine gore bir kimlik belirtin.

Birden Oldukça DOM Öğesi Seçicisi Kullanma

Kalan seçici işlevleri unsur gruplarını alır. Onlar. getElementsByTagName(), getElementsByClassName()ve querySelectorAll().

getElementsByTagName() kullanma

Bu, bir sonraki getElementsByTagName() seçici aynı etiket adına haiz bir unsur grubunu getirir. Mesela, tüm h2 öğeleri bir web sayfasında, aşağıdaki kodu kullanabilirsiniz:

value = document.getElementsByTagName('h2')
console.log(value)

Bu, tüm h2 öğelerini kıymet adında olan bir HTML koleksiyonunda depolar.

getElementsByClassName() kullanma

Bu, bir sonraki getElementsByClassName() seçici, aynı derslik adına haiz öğeler topluluğu döndürür.

value = document.getElementsByClassName('articles')
console.log(value)

Yukarıdaki kodu JavaScript dosyanıza eklemek, tarayıcı konsolundaki “makaleler” derslik adıyla dört div öğesini döndürür.

querySelectorAll() kullanma

Bu, bir sonraki querySelectorAll() yöntemi, verilen seçiciyle eşleşen tüm öğelerin düğüm listesini döndürür. Blog bölümündeki tüm paragraf öğelerine erişmek için aşağıdaki kodu kullanabilirsiniz:

value = document.querySelectorAll('#blog p')
console.log(value)

Hatta dizeye, her birini bir virgülle ayırarak, Tıpkı CSS’de olduğu şeklinde birkaç seçici ekleyebilirsiniz:

value = document.querySelectorAll('h2, .articles')
console.log(value)

Dinamik Web Sayfaları Yapmak için DOM Seçicilerini Kullanma

Bu aşamada, DOM’un iyi mi çalıştığını net bir halde anlamalısınız. Ek olarak, değişik tek ve çoklu seçicilerin yanı sıra bunların iyi mi kullanılacağını da bilmelisiniz.

Gene de, HTML öğelerine erişmek, DOM seçicileriyle yapabilecekleriniz için yalnızca ilk adımdır. DOM seçicileri, web sitenizin onclick ve onscroll vakalarını işleme şeklinde işlevsel taraflarını geliştirmenize destek olmak için uzun bir yol kat edecektir.