Belge Nesne Modeli (DOM), bir HTML belgesinin yapısal temsilidir. 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'deki her öğenin, JavaScript kullanarak erişebileceğiniz kendi öznitelikleri ve yöntemleri vardır.

Bu eğitim makalesinde, bir web sayfasının öğelerine erişmek için DOM seçici işlevlerini nasıl kullanacağınızı öğreneceksiniz.

DOM Öğelerine Nasıl Erişilir

Global belge nesnesi aracılığıyla bir web sayfasının en üst düzey DOM öğesine erişebilirsiniz. Örneğin, aşağıdaki gibi bir web sayfanız varsa:

Hoş geldin


 Lorem ipsum dolor sit amet conectetur adipisicing elit. Tenetur asperiores voluptatum ve itici güç mü?
 Quae iusto non eligendihic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Hakkında


 Lorem ipsum dolor sit amet conectetur adipisicing elit. Tenetur asperiores voluptatum ve itici güç mü?
 Quae iusto non eligendihic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Nesne



Makale Başlığı Bir


 Lorem ipsum dolor sit amet conectetur adipisicing elit. Tenetur asperiores voluptatum ve itici güç mü?
 Quae iusto non eligendihic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Daha fazla oku 





Makale Başlığı İki


 Lorem ipsum dolor sit amet conectetur adipisicing elit. Tenetur asperiores voluptatum ve itici güç mü?
 Quae iusto non eligendihic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Daha fazla oku 





Makale Başlığı Üç


 Lorem ipsum dolor sit amet conectetur adipisicing elit. Tenetur asperiores voluptatum ve itici güç mü?
 Quae iusto non eligendihic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Daha fazla oku 





Makale Başlığı Dört


 Lorem ipsum dolor sit amet conectetur adipisicing elit. Tenetur asperiores voluptatum ve itici güç mü?
 Quae iusto non eligendihic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Daha fazla oku 

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

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

içindeki her bölüm elemanı etiketi de genişletilebilir. Bir web sayfasının yapısına bağlı olarak, öğeler daha fazla öğe ortaya çıkarmak için genişlemeye devam edecektir. Bu size DOM'un yapısını daha net anlamanızı sağlayacaktır.

İlişkili: Web Sitelerinin Gizli Kahramanı: DOM'yi Anlamak

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

belge.gövde

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

Ancak bu, nesne özelliklerini kullanarak gidebileceğiniz kadarıyla. Her sayfanın bir başı ve bir gövdesi vardır, ancak bunun dışında benzersizdir. yani yazarak belge.gövde.bölüm veya benzeri herhangi bir şey, istediğiniz gibi çalışmayacaktır. Bunun yerine, belirli öğelere erişmek için belge nesnesinde çağırabileceğiniz yöntemler vardır.

DOM Öğe Seçicileri Nelerdir?

DOM öğe seçicileri, bir web sayfasındaki öğelere erişmek için belge nesnesinde kullanabileceğiniz bir grup JavaScript yöntemidir. DOM öğesi seçicilerinin iki kategorisi vardır: tekli ve çoklu seçiciler.

Bu işlevler, CSS seçicilerine benzer şekilde hareket eder. Öğeleri etiket adlarına veya kimliklerine ve sınıf özelliklerine göre almanıza izin verir. Hatta herhangi bir CSS seçiciyi kullanarak öğeleri getirebilirsiniz.

İlişkili: CSS Seçicileri Kullanarak Bir Web Sayfasının Bir Kısmı Nasıl Hedeflenir

Tek elemanlı seçiciler şunlardır:

• getElementById()
• sorguSeçici()

Çoklu eleman seçiciler şunlardır:

• getElementsByTagName()
• getElementsByClassName()
• sorguSelectorAll()

Kullandığınız DOM öğesi seçicisi, erişmeye çalıştığınız öğelere bağlı olacaktır.

Tek DOM Öğe Seçicilerini Kullanma

Seçicileri çoğunlukla JavaScript uygulamalarında göreceksiniz. Öyleyse konsoldan uzaklaşalım. Bir JavaScript dosyası oluşturun ve aşağıdaki komut dosyası etiketini kullanarak onu HTML dosyanıza bağlayın:

src değerinin JavaScript dosyanızın adı olduğu yer. Bu komut dosyası etiketini, kapanış gövde etiketinizin hemen önüne yerleştirin, .

bu getElementById() yöntemi, kimliğinin değerini kullanarak bir web sayfasındaki tek bir öğeye erişim sağlar. Yukarıdaki HTML belgesinde, kimlikleri olan birkaç öğe vardır. hedeflemek için div "makale-3" kimliğine sahip öğe, JavaScript dosyanıza aşağıdaki kodu ekleyebilirsiniz:

değer = document.getElementById('makale-3')

Şimdi div öğesi ile makale-3 Kimliğe ve ilgili tüm özelliklerine şuradan erişilebilir: değer değişken. yazdırabilirsiniz değer aşağıdaki kod satırını kullanarak konsola değişken:

konsol.log (değer)

Div öğesine atanan sınıf adının yanı sıra iç HTML gibi diğer önemli özellikleri de göreceksiniz.

Diğer tek eleman seçici, sorguSeçici(). Herhangi bir CSS seçici dizesini iletebildiğiniz için bu işlev daha çok yönlüdür. Ancak, yine de bir seferde yalnızca bir öğe seçmek için kullanabilirsiniz.

Örneğin, yukarıdaki HTML düzeninde tek bir sınıf vardır—makaleler. Dört div öğesi bu sınıfı kullanır, ancak sorguSeçici() işlevi yalnızca "makaleler" sınıfına sahip ilk öğeyi döndürür.

Bir Sınıfla querySelector() kullanma

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

değer = document.querySelector('.makaleler')
konsol.log (değer)

Bu sadece ilkini döndürür div "makaleler" sınıfına sahip öğe. Seçiciyi CSS seçiciyle aynı biçimde belirttiğinize dikkat edin. CSS'de, baştaki nokta bir sınıf adını belirtir.

Bir ID ile querySelector() kullanma

değer = document.querySelector('#makale-3')
konsol.log (değer)

Bu kod, "madde-3" kimliğine sahip tek öğeyi, üçüncü öğeyi döndürür. div "makaleler" sınıfına sahip öğe. Yine seçici dize, standart CSS sözdizimini kullanır. # bir kimliği belirten sembol.

Birden Çok DOM Öğe Seçici Kullanma

Kalan seçici işlevler, öğe gruplarını alır. Onlar getElementsByTagName(), getElementsByClassName(), ve sorguSelectorAll().

getElementsByTagName()'i kullanma

bu getElementsByTagName() seçici, aynı etiket adına sahip bir grup öğe getirir. Örneğin, tüm öğeleri seçmek istiyorsanız h2 Bir web sayfasındaki öğeler için aşağıdaki kodu kullanabilirsiniz:

değer = document.getElementsByTagName('h2')
konsol.log (değer)

Bu, tüm h2 öğelerini value adlı bir HTML koleksiyonunda saklar.

getElementsByClassName() kullanma

bu getElementsByClassName() seçici, aynı sınıf adına sahip bir öğe koleksiyonu döndürür.

değer = document.getElementsByClassName('makaleler')
konsol.log (değer)

Yukarıdaki kodu JavaScript dosyanıza eklemek, tarayıcı konsolunda "makaleler" sınıf adıyla birlikte dört div öğesini döndürür.

querySelectorAll() kullanma

bu sorguSelectorAll() method, verilen seçiciyle eşleşen tüm öğelerin bir 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:

değer = document.querySelectorAll('#blog p')
konsol.log (değer)

Hatta, tıpkı CSS'de olduğu gibi, her birini bir virgülle ayırarak, dizeye birkaç seçici bile ekleyebilirsiniz:

değer = document.querySelectorAll('h2, .articles')
konsol.log (değer)

Dinamik Web Sayfaları Oluşturmak için DOM Seçicileri Kullanın

Bu noktada, DOM'yi ve nasıl çalıştığını net bir şekilde anlamalısınız. Farklı tekli ve çoklu seçicileri ve bunların nasıl kullanılacağını da bilmelisiniz.

Yine de, HTML öğelerine erişim kazanmak, DOM seçicilerle yapabileceklerinizin yalnızca ilk adımıdır. DOM seçicileri, onclick ve onscroll olaylarını işleme gibi web sitenizin işlevsel yönlerini geliştirmenize yardımcı olmak için uzun bir yol kat edecektir.

Web Sitenizi CSS ve JavaScript ile Duyarlı ve Etkileşimli Hale Getirme

Web sitenizi HTML ve CSS ile kurdunuz, ancak şimdi mantık eklemeniz gerekiyor. İşte yapmanız gerekenler.

Sonrakini Oku

Yazar hakkında