JS DOM Koleksiyonları

DOM Koleksiyonları Nedir?

DOM koleksiyonları, HTML belgesindeki belirli bir öğe grubunu temsil eden bir grup nesnedir. Bu koleksiyonlar, HTML elemanlarına programatik olarak erişmemizi, onları düzenlememizi ve yeni öğeler eklememizi sağlar.

Bir DOM koleksiyonu, belirli bir HTML elemanına atanan bir özelliktir. Örneğin, bir div öğesine ait tüm p etiketlerini içeren bir DOM koleksiyonu olabilir. DOM koleksiyonları, sıklıkla JavaScript ile etkileşim kurarken kullanılır.

DOM koleksiyonları, farklı elemanlara erişim yöntemleri sağlar. Bunlar arasında indeksleme, sorgular ve seçiciler kullanma gibi yöntemler bulunur. HTML elemanlarına erişmek ve manipüle etmek için bu yöntemlerden uygun olanını seçebilirsiniz.

• DOM koleksiyonlarının temel özellikleri:
• Length (Uzunluk): Bir koleksiyondaki eleman sayısını belirtir.
• Index (Dizin): Elemanlara sıfırdan başlayarak indeks numaraları atanır.
• Item () Metodu: Belirli bir indeksteki elemana erişmek için kullanılır.
• forEach () Metodu: Koleksiyon üzerindeki her eleman için bir işlev çağırır.

Örnekler	Açıklama
document.getElementsByTagName(“p”)	Sayfadaki tüm p etiketlerini içeren bir koleksiyon döner.
document.getElementsByClassName(“container”)	container sınıfına sahip tüm elemanları içeren bir koleksiyon döner.
document.querySelectorAll(“ul li”)	Sayfadaki tüm ul içindeki li elemanlarını içeren bir koleksiyon döner.

DOM Koleksiyonları Nasıl Oluşturulur?

DOM (Belge Nesne Modeli), HTML veya XML belgeleri üzerinde çalışmak için kullanılan bir programlama arayüzüdür. DOM koleksiyonları, belge içindeki öğeleri bir araya getirmek için kullanılan bir özelliktir. DOM koleksiyonları, belgeye eklenen veya silinen öğeleri otomatik olarak güncelleyerek, elemanlara kolay erişim ve manipülasyon imkanı sağlar.

Bir DOM koleksiyonu oluşturmak için genellikle querySelectorAll() veya getElementsByTagName() metodları kullanılır. Bu metodlar, belirli bir seçiciye veya etikete sahip öğeleri seçmek için kullanılır. Örneğin, querySelectorAll(‘p’) kullanarak belgedeki tüm paragraf öğelerine erişebiliriz.

Bir DOM koleksiyonu oluşturduktan sonra, koleksiyondaki elemanlara erişmek için döngü kullanabiliriz. Örneğin, aşağıdaki kod parçasıyla belgedeki tüm paragrafların içeriğini konsola yazdırabiliriz:

const paragraphs = document.querySelectorAll(‘p’);
paragraphs.forEach(p => {
console.log(p.innerHTML);
});

DOM koleksiyonlarının kullanımı, belge üzerinde daha karmaşık manipülasyonlar yapmayı kolaylaştırır. Elemanları eklemek, silmek veya düzenlemek için daha spesifik seçicileri kullanarak koleksiyonlara erişebilir ve işlemler yapabiliriz. Ayrıca, DOM koleksiyonlarıyla çalışmak, kodun daha okunaklı ve daha sürdürülebilir olmasını sağlar.

DOM Koleksiyonlarında Eleman Erişimi

DOM koleksiyonları, web sayfalarındaki HTML öğelerine erişmek ve bu öğeler üzerinde işlemler yapmak için kullanılan bir JavaScript aracıdır. DOM koleksiyonları, bir HTML elementinin bir veya daha fazla alt öğesi olduğunda oluşturulur. Bu koleksiyonlara, HTML elementlerine erişerek veri almak veya veri değiştirmek için kullanabiliriz.

DOM koleksiyonlarına erişmek için JavaScript’teki querySelectorAll() yöntemini kullanabiliriz. Bu yöntem, belirli bir CSS seçicisi kullanarak sayfadaki tüm uygun öğeleri seçer ve bir NodeList olarak döndürür. Örneğin, tüm “div” elementlerini seçmek için şu kodu kullanabiliriz:

• Kod: var divElements = document.querySelectorAll(“div”);

Bu kod, sayfadaki tüm “div” elementlerini seçer ve NodeList olarak divElements değişkenine atar. Bu NodeList’i kullanarak, elementlere erişebiliriz.

Bir NodeList, bir dizi gibi davranır, yani index numarası kullanarak elementlere erişebiliriz. Örneğin, ilk “div” elementine erişmek için şu kodu kullanabiliriz:

Kod	Açıklama
var firstDiv = divElements[0];	İlk “div” elementine erişmek için kullanılır.

Bu kod, NodeList’teki ilk elemente erişir ve firstDiv değişkenine atar. Artık bu değişken üzerinde değişiklik yapabilir veya veri alabiliriz. Örneğin, ilk “div” elementinin içeriğini almak için şu kodu kullanabiliriz:

• Kod: var content = firstDiv.innerHTML;

Bu kod, ilk “div” elementinin içeriğini content değişkenine atar. Böylece, elementlere erişmek ve bu elementler üzerinde işlemler yapmak için DOM koleksiyonlarını kullanabiliriz.

DOM Koleksiyonları İle Eleman Ekleme ve Silme

DOM koleksiyonları, web sayfalarındaki HTML elementlerine erişmek ve bu elementler üzerinde işlemler yapmak için kullanılan bir tekniktir. DOM koleksiyonlarını kullanarak, web sayfalarını daha etkileşimli hale getirebilir ve dinamik içerikler oluşturabiliriz. Bu yazıda, DOM koleksiyonları ile nasıl element ekleyip sileceğimizi öğreneceğiz.

Element Ekleme

DOM koleksiyonları ile element eklemek için öncelikle hedeflediğimiz elementin parent elementine ulaşmamız gerekmektedir. Ardından, parent element üzerinden createElement() fonksiyonunu kullanarak yeni bir element oluşturabiliriz. Oluşturulan elementi parent elementin içine eklemek için appendChild() metodunu kullanabiliriz. Böylece, yeni bir element oluşturup web sayfasına eklemiş oluruz.

Element Silme

DOM koleksiyonları ile element silmek için ise öncelikle hedeflenen elemente erişmemiz gerekmektedir. Daha sonra, remove() veya removeChild() metotlarını kullanarak elementi silme işlemini gerçekleştirebiliriz. remove() metodu, direkt olarak silmek istediğimiz elementi belirli bir ağaç yapısı içerisinden kaldırırken, removeChild() metodu ise belirlediğimiz parent element içerisinden belirli bir çocuk elementi kaldırmamızı sağlar.

DOM Koleksiyonlarında Eleman Düzenleme

DOM (Belge Nesne Modeli), web sayfalarının yapısını ve içeriğini programlı bir şekilde değiştirmemizi sağlayan bir API’dir. DOM koleksiyonları, web sayfalarındaki elemanları gruplamak için kullanılan bir yapıdır. Bu koleksiyonlar, elemanlara erişmek ve düzenlemek için kullanılır. Bu yazıda, DOM koleksiyonlarında eleman düzenleme konusuna odaklanacağız.

Bir DOM koleksiyonunda, belirli bir HTML elemanına erişmek ve onu düzenlemek için farklı yöntemler kullanabilirsiniz. Bir elemanın metnini değiştirmek, özelliklerini güncellemek veya stilini değiştirmek gibi farklı düzenleme işlemleri yapılabilir. İşte bu işlemleri gerçekleştirmek için kullanabileceğiniz bazı temel DOM yöntemleri:

• getElementById(): Belirli bir ID’ye sahip elemana erişmek için kullanılır.
• getElementsByClassName(): Belirli bir sınıfa sahip tüm elemanlara erişmek için kullanılır.
• getElementsByTagName(): Belirli bir etikete sahip tüm elemanlara erişmek için kullanılır.

Bu yöntemler sayesinde, web sayfasındaki belirli bir elemanı seçebilir ve ardından istediğiniz değişikliği yapabilirsiniz. Örneğin, getElementById() yöntemini kullanarak belirli bir ID’ye sahip bir elemanı seçebilir ve onun metnini veya stilini güncelleyebilirsiniz.

Metod	Açıklama
getElementById()	Belirli bir ID’ye sahip elemana erişmek için kullanılır.
getElementsByClassName()	Belirli bir sınıfa sahip tüm elemanlara erişmek için kullanılır.
getElementsByTagName()	Belirli bir etikete sahip tüm elemanlara erişmek için kullanılır.

DOM koleksiyonlarında eleman düzenleme, web sayfanızın dinamik özelliklerini oluşturmanızı ve kullanıcı deneyimini iyileştirmenizi sağlar. Örneğin, bir form elemanının değerini kullanıcının girdiği veriyle güncellemek veya bir düğmeye tıklandığında belirli bir elemanı gizlemek gibi işlemler yapabilirsiniz.

DOM koleksiyonlarından elde edilen elemanları düzenlerken dikkatli olmanız önemlidir. Yanlışlıkla yanlış bir elemanı veya özelliği düzenleyebilir ve beklenmeyen sonuçlar elde edebilirsiniz. Bu nedenle, elemanları seçme işlemlerini dikkatlice yapmalı ve doğru yöntemleri kullanmalısınız.

DOM Koleksiyonlarıyla İşlem Yapmanın Avantajları

DOM (Document Object Model) koleksiyonları, web uygulamalarında HTML ve XML dokümanlarını manipüle etmek için kullanılan bir araçtır. Bu koleksiyonlar, dokümanın elemanlarını, özelliklerini ve metin içeriğini değiştirmek için popüler bir yöntemdir. DOM koleksiyonları, web geliştiricilerine daha etkili ve verimli bir şekilde işlem yapma imkanı sunar.

Bir DOM koleksiyonu, benzer niteliklere sahip bir dizi elemandan oluşur. Örneğin, belirli bir sınıfa veya etikete sahip tüm elemanlar bir DOM koleksiyonu oluşturabilir. Bu koleksiyonlara Javascript kullanarak erişilebilir ve elemanlara istenilen değişiklikleri yapabiliriz.

DOM koleksiyonlarıyla işlem yapmanın birçok avantajı vardır. İlk olarak, bu koleksiyonlar sayesinde web sayfalarını dinamik hale getirmek çok daha kolaydır. Örneğin, bir DOM koleksiyonunda bulunan tüm elemanların bir özelliğini değiştirmek istediğimizde, bu işlemi tek bir kod satırıyla halledebiliriz. Ayrıca, DOM koleksiyonlarıyla eleman ekleme veya silme gibi işlemleri de kolaylıkla gerçekleştirebiliriz.

DOM Koleksiyonlarının Kullanım Senaryoları

DOM (Document Object Model), web sayfalarınızın yapısını ve içeriğini temsil eden bir programlama arabirimidir. DOM koleksiyonları, DOM üzerinde çalışmak için kullanılan güçlü bir araçtır. Bu koleksiyonlar, web sayfasında bulunan tüm öğeleri seçmemizi ve bunlarla etkileşimde bulunmamızı sağlar. Bu yazıda, DOM koleksiyonlarının kullanım senaryolarına bir göz atacağız.

Birinci senaryo, web sayfasında belirli bir öğeyi seçmek ve onunla etkileşimde bulunmaktır. Örneğin, bir butonun tıklanma olayına bir işlev eklemek isteyebiliriz. Bu durumda, öncelikle butonu seçmeliyiz. DOM koleksiyonları, bu işlemi kolaylaştırır. İkinci senaryo, belirli bir öğe veya öğeler kümesini seçmek ve bunları düzenlemektir. Örneğin, bir liste öğesinin rengini değiştirmek isteyebiliriz. DOM koleksiyonlarıyla, bu liste öğelerini seçebilir ve istediğimiz değişiklikleri yapabiliriz. Üçüncü senaryo ise, yeni bir öğe eklemek veya mevcut bir öğeyi silmektir. DOM koleksiyonları, sayfanıza yeni bir öğe eklemenizi veya mevcut bir öğeyi kaldırmanızı kolaylaştırır.

DOM koleksiyonlarının kullanım senaryoları oldukça çeşitlidir ve web geliştirme sürecinizi kolaylaştırabilir. Bu koleksiyonlar, web sayfanızda bulunan nesnelerle etkileşimde bulunmanızı ve istediğiniz değişiklikleri yapmanızı sağlar. Öğeleri seçmek, düzenlemek, eklemek veya silmek için DOM koleksiyonlarından yararlanabilirsiniz. Bu sayede web sayfanızı dinamik hale getirebilir ve kullanıcı deneyimini iyileştirebilirsiniz. DOM koleksiyonlarını kullanmanın avantajlarını keşfetmek için, bu senaryoları uygulamak için pratik yapmanızı tavsiye ederim.

• DOM koleksiyonları, web sayfanızda bulunan öğelerle etkileşimde bulunmanızı sağlar.
• Belirli bir öğeyi seçmek, düzenlemek, eklemek veya silmek için DOM koleksiyonlarından yararlanabilirsiniz.
• DOM koleksiyonlarını kullanarak web sayfanızı dinamik hale getirebilir ve kullanıcı deneyimini iyileştirebilirsiniz.

Senaryo	İşlemler
Öğe Seçme	Belirli bir öğeyi seçmek için DOM koleksiyonlarından yararlanabilirsiniz.
Öğe Düzenleme	Seçilen öğeleri düzenlemek için DOM koleksiyonlarını kullanabilirsiniz.
Öğe Ekleme/Silme	Yeni öğeler eklemek veya mevcut öğeleri silmek için DOM koleksiyonlarından faydalanabilirsiniz.

Sık Sorulan Sorular

DOM Koleksiyonları Nedir?

DOM koleksiyonları, HTML dokümanının bir veya daha fazla elementini temsil eden ve grup olarak ele alınabilen nesnelerdir. Bu koleksiyonlar, elementlerin belirli bir sıralama veya hiyerarşiye göre erişilebilmelerini sağlar.

DOM Koleksiyonları Nasıl Oluşturulur?

DOM koleksiyonları, JavaScript ile HTML dokümanı üzerinde çalışırken otomatik olarak oluşturulur. Örneğin, belirli bir sınıfa sahip olan tüm elemanlar bir koleksiyon olarak temsil edilir ve bu koleksiyona erişebilmek için JavaScript kodunuzda class adını kullanabilirsiniz.

DOM Koleksiyonlarında Eleman Erişimi

DOM koleksiyonlarına erişmek için genellikle indeks veya forEach döngüsü gibi yöntemler kullanılır. Örneğin, bir koleksiyonda bulunan tüm elemanlara erişmek için forEach döngüsü kullanabilir ve her bir eleman üzerinde istediğiniz işlemleri gerçekleştirebilirsiniz.

DOM Koleksiyonları İle Eleman Ekleme ve Silme

DOM koleksiyonları üzerinde eleman eklemek ve silmek için JavaScript’in createElement ve removeChild gibi yöntemlerini kullanabilirsiniz. Örneğin, bir koleksiyona yeni bir eleman eklemek için createElement ile yeni bir eleman oluşturup, koleksiyona appendChild ile ekleyebilirsiniz. Aynı şekilde, removeChild kullanarak koleksiyondan bir elemanı silebilirsiniz.

DOM Koleksiyonlarında Eleman Düzenleme

DOM koleksiyonlarında bulunan elemanların değerlerini veya stil özelliklerini değiştirebilirsiniz. Bunun için JavaScript’in innerHTML veya style gibi özelliklerini kullanabilirsiniz. Örneğin, bir koleksiyondaki tüm elemanların metin içeriğini değiştirmek için innerHTML özelliğini kullanabilirsiniz.

DOM Koleksiyonlarıyla İşlem Yapmanın Avantajları

DOM koleksiyonlarıyla çalışmak, çoğu durumda daha kolay ve daha verimli bir kod yazmayı sağlar. Koleksiyonların sunduğu özellikler sayesinde, benzer işlemleri tek bir kod bloğunda gerçekleştirebilir ve kodunuza daha az tekrar eklemeniz gerekir.

DOM Koleksiyonlarının Kullanım Senaryoları

DOM koleksiyonları, web uygulamalarında sıklıkla kullanılır. Örneğin, bir formdaki tüm giriş alanlarına erişmek veya bir liste içindeki tüm öğeleri düzenlemek gibi durumlarda DOM koleksiyonlarından faydalanabilirsiniz. Aynı zamanda web sayfasında yer alan tüm bağlantıları veya görüntüleri koleksiyonlar aracılığıyla hızlı bir şekilde erişebilir ve işleyebilirsiniz.