Javascript Programlama Ünite -7

Doküman Nesne Modeli (DOM), bir web belgesinin yapısını, içeriğini ve stilini temsil eden bir programlama arayüzüdür. DOM, HTML veya XML belgelerinin ağaç yapısında temsil edilmesini sağlar ve bu yapının JavaScript kullanılarak dinamik olarak değiştirilmesine olanak tanır.

DOM ile Yapabilecekleriniz:

HTML öğelerini değiştirme veya yeni öğeler ekleme.
HTML öğelerinin içeriğini değiştirme.
HTML öğelerinin stillerini değiştirme.
Olaylar dinleme ve bu olaylara tepki verme.

Temel DOM Metodları ve Özellikleri:

getElementById(id):

Belirli bir ID’ye sahip elementi seçer.

getElementsByClassName(className):

Belirli bir sınıfa sahip elementleri seçer.

getElementsByTagName(tagName):

Belirli bir etiket adına sahip elementleri seçer.

querySelector(selector):

CSS seçicilerini kullanarak ilk eşleşen elementi seçer.

querySelectorAll(selector):

CSS seçicilerini kullanarak tüm eşleşen elementleri seçer.

createElement(tagName):

Yeni bir HTML öğesi oluşturur.

appendChild(newChild):

Bir öğeyi, belirli bir öğenin alt öğesi olarak ekler.

removeChild(child):

Bir öğeyi, belirli bir öğeden kaldırır.

innerHTML:

Bir öğenin HTML içeriğini alır veya ayarlar.

textContent:

Bir öğenin metin içeriğini alır veya ayarlar.

addEventListener(event, function):

Belirli bir olayı dinler ve gerçekleştiğinde belirtilen işlevi çalıştırır.

DOM, web sayfalarının dinamik olarak güncellenmesine olanak tanıyan güçlü bir araçtır. JavaScript ile birlikte kullanıldığında kullanıcı etkileşimlerine yanıt veren zengin web uygulamaları oluşturmak mümkündür. DOM manipülasyonu sayesinde web sayfalarının içeriği ve yapısı, kullanıcı etkileşimlerine göre dinamik olarak değiştirilebilir. Bu, modern web uygulamalarının temelini oluşturur ve kullanıcı deneyimini önemli ölçüde iyileştirir.

Doküman Nesne Modeli (DOM), bir web belgesinin yapısını, içeriğini ve stilini temsil eden bir programlama arayüzüdür. DOM, HTML veya XML belgelerinin ağaç yapısında temsil edilmesini sağlar ve bu yapının JavaScript kullanılarak dinamik olarak değiştirilmesine olanak tanır.

DOM, bir belgenin mantıksal yapısını ve tarayıcıya belgenin içeriğini nasıl göstermesi gerektiğini tanımlar. Belgenin yapısındaki her öğe, bir düğüm (node) olarak adlandırılır ve bu düğümler birbirleriyle hiyerarşik olarak bağlanır. En üst düzeydeki düğüm document nesnesidir ve bu nesne, belgedeki tüm diğer öğeleri içerir.

JavaScript ile DOM manipülasyonu, web sayfalarını dinamik ve etkileşimli hale getirmek için kritik öneme sahiptir. JavaScript, DOM’daki öğeleri seçmek, eklemek, değiştirmek veya kaldırmak için çeşitli yöntemler sunar. Örneğin, getElementById(), getElementsByClassName(), querySelector() gibi yöntemlerle öğeler seçilebilir ve innerHTML, textContent veya appendChild() gibi yöntemlerle öğelerin içerikleri değiştirilebilir.

DOM, aynı zamanda stil ve özellik manipülasyonlarına da olanak tanır. element.style.property kullanarak bir öğenin stili değiştirilebilir, element.setAttribute() ve element.getAttribute() kullanarak öznitelikler ayarlanabilir veya alınabilir.

Özetle, DOM web sayfalarının dinamik olarak güncellenmesine olanak tanıyan güçlü bir araçtır ve JavaScript ile birlikte kullanıldığında kullanıcı etkileşimlerine yanıt veren zengin web uygulamaları oluşturmak mümkündür.

1- JavaScript’te DOM (Document Object Model) nedir ve ne işe yarar?

A) Tarayıcıda HTML ve XML belgelerini temsil eden ağaç yapısıdır.
B) Sadece HTML belgelerini temsil eden bir yapıdır.
C) JavaScript kodlarını çalıştıran bir motorudur.
D) Web sayfalarının stilini belirleyen bir modeldir.

Cevap : A) Tarayıcıda HTML ve XML belgelerini temsil eden ağaç yapısıdır.

Açıklama : DOM, HTML ve XML belgelerini tarayıcıda temsil eden ve belge içeriğini ve yapısını manipüle etmeye olanak tanıyan ağaç yapısıdır.

2- DOM’da bir elemente nasıl erişilir ve değiştirilir?

A) getElementById metodu ile erişilir ve innerHTML ile değiştirilir.
B) querySelectorAll metodu ile erişilir ve style ile değiştirilir.
C) getElementByClass metodu ile erişilir ve innerText ile değiştirilir.
D) getElementByTagName metodu ile erişilir ve textContent ile değiştirilir.

Cevap : A) getElementById metodu ile erişilir ve innerHTML ile değiştirilir.

Açıklama : DOM’da bir elemente erişmek için getElementById metodu kullanılır ve bu elementin içeriği innerHTML özelliği ile değiştirilebilir.

3- Aşağıdakilerden hangisi DOM olaylarından biridir?

A) onload
B) onstyle
C) oncontent
D) onhtml

Cevap : A) onload

Açıklama : DOM olayları, kullanıcı etkileşimleri veya sayfa yüklenmesi gibi durumları işlemek için kullanılır. onload, bir sayfanın tamamen yüklendiğinde çalıştırılan bir olaydır.

4- Bir DOM olayını nasıl dinlersiniz?

A) addEventListener metoduyla
B) listenToEvent metoduyla
C) captureEvent metoduyla
D) watchEvent metoduyla

Cevap : A) addEventListener metoduyla

Açıklama : DOM’da olayları dinlemek ve işlemler gerçekleştirmek için addEventListener metodu kullanılır.

5- Aşağıdaki yöntemlerden hangisi bir elementin sınıfını ekler veya çıkarır?

A) classList.add ve classList.remove
B) className.add ve className.remove
C) class.add ve class.remove
D) classProperty.add ve classProperty.remove

Cevap : A) classList.add ve classList.remove

Açıklama : classList.add metodu, bir elemente sınıf eklerken, classList.remove metodu, bir elementten sınıf çıkarır.

6- Aşağıdaki JavaScript kodu DOM’da ne yapar?

document.getElementById(“demo”).style.color = “red”;

A) “demo” id’sine sahip elementin metnini kırmızı yapar.
B) “demo” id’sine sahip elementin arka planını kırmızı yapar.
C) “demo” id’sine sahip elementin kenarlığını kırmızı yapar.
D) “demo” id’sine sahip elementin yüksekliğini artırır.

Cevap : A) “demo” id’sine sahip elementin metnini kırmızı yapar.

Açıklama : Bu kod, “demo” id’sine sahip elementin style.color özelliğini kırmızıya ayarlayarak metnin rengini değiştirir.

7 -Aşağıdakilerden hangisi Doküman Nesne Modeli’nin (DOM) amacı ile ilgilidir?

A) Veritabanı yönetimi
B) Web sayfasının yapısını temsil etmek ve değiştirmek
C) Sunucu taraflı programlama
D) CSS dosyalarını yönetmek
E) Veritabanı bağlantıları kurmak

Cevap : B) Web sayfasının yapısını temsil etmek ve değiştirmek

Açıklama: DOM, bir web sayfasının HTML veya XML belgelerinin ağaç yapısında temsil edilmesini sağlar ve JavaScript ile bu yapının dinamik olarak değiştirilmesine olanak tanır.

8- DOM ağacında, bir belgenin en üst düzeydeki öğesi nedir?

A) head
B) body
C) root
D) document
E) window

Cevap : D) document

Açıklama: DOM ağacında en üst düzeydeki öğe, tüm HTML veya XML belgelerini temsil eden document nesnesidir.

9- JavaScript ile DOM’daki bir öğeyi seçmek için hangi yöntem kullanılır?

A) querySelector()
B) getElementById()
C) getElementsByClassName()
D) getElementsByTagName()
E) Hepsi

Cevap : E) Hepsi

Açıklama: JavaScript ile DOM’daki öğeleri seçmek için querySelector(), getElementById(), getElementsByClassName() ve getElementsByTagName() yöntemleri kullanılabilir.

10- DOM’da bir öğenin içeriğini değiştirmek için hangi yöntem kullanılır?

A) innerHTML
B) outerHTML
C) textContent
D) value
E) Hepsi

Cevap : E) Hepsi

Açıklama: innerHTML, outerHTML, textContent ve value yöntemleri, DOM’da bir öğenin içeriğini değiştirmek için kullanılabilir.

11- Aşağıdaki seçeneklerden hangisi DOM’da bir öğe eklemek için kullanılır?

A) appendChild()
B) removeChild()
C) replaceChild()
D) insertBefore()
E) Hepsi

Cevap : E) Hepsi

Açıklama: DOM’da bir öğe eklemek için appendChild(), removeChild(), replaceChild() ve insertBefore() yöntemleri kullanılabilir.

12- JavaScript ile DOM’daki bir öğenin stilini değiştirmek için hangi yöntem kullanılır?

A) element.style.property
B) element.classList.add()
C) element.setAttribute()
D) element.getAttribute()
E) element.removeAttribute()

Cevap : A) element.style.property

Açıklama: DOM’da bir öğenin stilini değiştirmek için element.style.property yöntemi kullanılır, diğer yöntemler sınıf eklemek, öznitelik ayarlamak veya öznitelik kaldırmak için kullanılır