JS DOM Düğümleri

DOM Nedir?

DOM (Document Object Model), web sayfalarının yapısını temsil eden bir programlama arayüzüdür. HTML veya XML dokümanlarını ağaç yapısı şeklinde temsil ederek, dokümanın her bir öğesine (düğüme) erişim ve manipülasyon imkanı sağlar. DOM, web sayfalarının dinamik olarak değiştirilmesine olanak tanır ve JavaScript gibi programlama dilleri kullanılarak erişilebilir.

DOM ile bir web sayfası, bir ağaç yapısı olarak modellemeye tabi tutulur. Bu ağaç yapısında her düğüm, dokümanda yer alan bir HTML veya XML öğesini temsil eder. Her düğümün özellikleri ve metin içeriği bulunabilir. DOM, bu düğümlere erişme, düğüm özelliklerini değiştirme ve yeni düğümler ekleyip kaldırma gibi işlemleri yapmak için bir dizi API sağlar.

DOM kullanarak web sayfalarındaki içerikleri yönetmek oldukça kolaydır. Bir düğüme erişmek için belirli bir düğüm yolunu takip etmek yeterlidir. Örneğin, belirli bir HTML öğesine (düğüme) ulaşmak için, öğenin etiket adını kullanarak veya bir CSS seçiciye benzeyen bir yol tanımlayarak düğümü seçebiliriz. Seçtiğimiz düğüm üzerinde değişiklikler yapabilir veya içeriğini alabiliriz.

DOM Düğümleri ve Özellikleri

DOM (Document Object Model), HTML, XHTML veya XML dosyalarını bir programlama dili olarak düşünebiliriz. Bu model, web tarayıcılarının içeriği ve yapısını temsil etmek için kullanılır. DOM, aynı zamanda web sayfalarındaki her bir öğeyi(HTML etiketleri) eleman(lar)ına dönüştürür. Bu da bizim web sayfalarındaki öğelerle dinamik olarak etkileşim kurmamızı sağlar.

DOM düğümleri, HTML dokümanındaki her bir öğeyi veya elemanı temsil eden ağaç benzeri bir yapıdır. Bu düğümler birbirleriyle ilişkilidir ve belirli bir öğeyi bulmak ve onunla etkileşim kurmak için kullanılırlar. DOM düğümlerinin her biri bir özellik listesine ve yöntemlere sahiptir.

DOM düğümlerinin bazı özelliklerinden bazıları şunlardır:

• nodeType: Düğümün türünü belirten bir numaradır. Örnek olarak, bir element düğümü 1 değerine, bir attribute düğümü 2 değerine ve metin düğümü 3 değerine sahiptir.
• nodeName: Düğümün adını döndürür. Örnek olarak, bir element düğümü için ad ‘div’, bir attribute düğümü için ad ‘class’ olabilir.
• nodeValue: Düğümün değerini döndürür. Örnek olarak, bir metin düğümü için değer düğümün içeriğidir.
• parentNode: Düğümün üst düğümünü döndürür.
• childNodes: Düğümün alt düğümlerini bir NodeList olarak döndürür.

nodeType Değerleri	Anlamı
1	Element düğümü
2	Attribute düğümü
3	Metin düğümü
8	Yorum düğümü

DOM Düğüm Seçimi ve Manipülasyonu

DOM nedir? DOM, “Document Object Model” kelimelerinin baş harflerinden oluşan bir kısaltmadır. Web sayfalarının yapısını ve içeriğini temsil eden, programlama dilleri tarafından kolayca değiştirilebilen bir arayüzdür. DOM, HTML veya XML belgelerini birer nesne olarak ele alır ve bu nesneler aracılığıyla belgelere erişim ve manipülasyon imkanı verir.

DOM düğümleri ve özellikleri nelerdir? DOM, bir belgenin her bir öğesini düğüm olarak temsil eder. Düğümler, ağaç yapısında hiyerarşik bir şekilde düzenlenmiştir. Her bir düğüm, belgedeki bir öğe veya öğe kümesini temsil eder. Örneğin, HTML belgesindeki başlık, paragraf, liste gibi öğeler, DOM ağacında birer düğüm olarak yer alır. Her düğüm, belirli özelliklere sahiptir. Örneğin, bir paragraf düğümü “textContent” veya “innerHTML” gibi özelliklere sahip olabilir.

DOM düğüm seçimi ve manipülasyonu nasıl yapılır? DOM ağacında belirli bir düğüme erişmek veya düğüm üzerinde değişiklik yapmak için çeşitli yöntemler vardır. “getElementById”, “getElementsByClassName” veya “getElementsByTagName” gibi yöntemler kullanılarak belirli bir düğüme erişilebilir. Bu yöntemler, CSS seçicileriyle benzer bir şekilde çalışır. Seçilen düğüm üzerinde ise “appendChild”, “removeChild” veya “setAttribute” gibi yöntemler kullanarak manipülasyon yapılabilir.

• Düğüm seçme yöntemleri
• Düğüm ekleme ve silme yöntemleri
• Düğümde değişiklik yapma yöntemleri

Düğüm Seçme	Düğüm Ekleme ve Silme	Düğümde Değişiklik Yapma
getElementById	appendChild	setAttribute
getElementsByClassName	removeChild	style property
getElementsByTagName	insertBefore	textContent

DOM Olayları ve İşleyicileri

“DOM Olayları ve İşleyicileri” başlıklı blog yazısına hoş geldiniz! Bu yazıda, DOM olaylarının ne olduğunu ve nasıl işlendiğini keşfedeceğiz. DOM olayları, web sayfalarında olup biten etkileşimlerden sorumludur ve işleyiciler ise bu olayları yakalamak ve buna uygun bir şekilde tepki vermek için kullanılır.

DOM olayları, kullanıcı etkileşimi, sayfa yükleme durumu, form gönderme gibi çeşitli durumlarda gerçekleşebilir. Örneğin, bir kullanıcı bir düğmeye tıkladığında veya bir form gönderildiğinde DOM olayları tetiklenebilir. Bu olaylar, HTML etiketlerine eklenen özel HTML özellikleri veya JavaScript kodu kullanılarak yakalanabilir.

Bir DOM olayını işlemek için işleyiciler kullanılır. İşleyiciler, olayları dinler ve belirli bir eylem gerçekleştirirler. Örneğin, bir düğmeye tıklandığında bir mesaj göstermek veya bir form gönderildiğinde verileri işlemek gibi.

• click – Kullanıcının bir öğeye tıkladığında tetiklenir.
• mouseover – Kullanıcının bir öğenin üzerine gelmesiyle tetiklenir.
• submit – Bir form gönderildiğinde tetiklenir.
• load – Bir web sayfasının yüklendiğinde tetiklenir.

Olay Adı	İşlevi
click	Bir öğeye tıklandığında tetiklenir.
mouseover	Bir öğenin üzerine gelindiğinde tetiklenir.
submit	Bir form gönderildiğinde tetiklenir.
load	Bir web sayfasının yüklendiğinde tetiklenir.

Bir DOM olayına işleyici eklemek için, önce ilgili DOM düğümünü seçmeliyiz. Ardından, addEventListener yöntemini kullanarak işleyiciyi belirtmeliyiz. İşleyici, bir fonksiyon olarak tanımlanır ve olay tetiklendiğinde çağrılır.

Özetlemek gerekirse, DOM olayları web sayfanızda gerçekleşen etkileşimleri yakalamanıza ve uygun tepkiler vermenize olanak tanır. İşleyiciler ise bu olayları dinleyen ve gerektiğinde belirli bir eylem gerçekleştiren fonksiyonlardır. DOM olayları ve işleyicileri kullanarak, web sayfanızı daha etkileşimli ve kullanıcı dostu hale getirebilirsiniz.

DOM Düğüm Ekleme ve Silme

DOM (Belge Nesne Modeli), bir web sayfasının yapısını temsil eden bir ağaç yapısıdır. DOM düğümleri, sayfanın farklı öğelerini temsil eden elemanlardır. Bu blog yazısında DOM düğüm ekleme ve silme konusunu ele alacağız.

DOM’da düğüm ekleme ve silme işlemleri oldukça önemlidir. Bu işlemler, web sayfalarının dinamik ve etkileşimli olmasını sağlar. Bir düğümü eklemek veya silmek, sayfanın yapısını değiştirebilir ve içeriğini güncelleyebilir.

Bir düğümü eklemek için appendChild yöntemini kullanabiliriz. Bu yöntem, belirli bir düğümün altına yeni bir düğüm ekler. Örneğin, aşağıdaki kod parçası bir yeni paragraf düğümünü bir div düğümünün içine ekler:

let divDugumu = document.createElement(“div”);
let paragrafDugumu = document.createElement(“p”);
paragrafDugumu.textContent = “Merhaba, DOM!”;
divDugumu.appendChild(paragrafDugumu);

Bir düğümü silmek için removeChild yöntemini kullanabiliriz. Bu yöntem, belirli bir düğümü DOM’dan kaldırır. Örneğin, aşağıdaki kod parçası bir paragraf düğümünü DOM’dan kaldırır:

let paragrafDugumu = document.getElementById(“paragraf”);
paragrafDugumu.parentNode.removeChild(paragrafDugumu);

DOM düğüm ekleme ve silme işlemleri, web sayfalarınızı daha dinamik ve etkileşimli hale getirebilir. Bu işlemleri doğru bir şekilde kullanarak, sayfanızın yapısını ve içeriğini istediğiniz gibi güncelleyebilirsiniz.

DOM Düğüm Gezinme Yöntemleri

DOM (Document Object Model), bir web sayfasının yapısını ve içeriğini temsil eden bir programlama arayüzüdür. DOM düğüm gezinme yöntemleri, bu yapıya erişmek ve belirli düğümler üzerinde işlem yapmak için kullanılır. Bu makalede, DOM düğüm gezinme yöntemlerini ve nasıl kullanılacaklarını inceleyeceğiz.

DOM düğüm gezinme yöntemleri, web sayfasındaki belirli bir düğümü bulmayı ve onunla etkileşimde bulunmayı sağlar. Bu yöntemler, ağaç benzeri bir yapıda olan DOM düğümlerini tararken kullanılır. Bu way, belirli bir düğümün çocuklarını, ebeveynini veya kardeşlerini bulabiliriz. Birçok farklı yöntem bulunmasına rağmen, en yaygın olarak kullanılanlar getElementById(), getElementsByClassName() ve querySelectorAll() fonksiyonlarıdır.

Aşağıda, DOM düğüm gezinme yöntemlerini kullanarak belirli bir düğümü seçme ve manipüle etme örneklerini bulabilirsiniz:

DOM Yöntemi	Açıklama
getElementById()	Bir ID’ye sahip düğümü seçmek için kullanılır.
getElementsByClassName()	Belirli bir sınıfa sahip düğümleri seçmek için kullanılır.
querySelectorAll()	Belirli bir CSS seçicisine uygun düğümleri seçmek için kullanılır.

Yukarıdaki örneklerde, getElemenstById() yöntemi ile bir ID’ye sahip olan düğüm bulunur ve onunla etkileşimde bulunulabilir. getElementsByClassName() yöntemi ile belirli bir sınıfa sahip olan düğümler seçilebilir ve querySelectorAll() yöntemi ile belirli bir CSS seçicisine uygun düğümler seçilebilir. Bu yöntemler sayesinde, DOM üzerinde gezinme ve düğüm manipülasyonu daha kolay ve etkili bir şekilde gerçekleştirilebilir.

DOM Stil ve Görsellik İşlemleri

DOM (Document Object Model), HTML ve XML dokümanlarını temsil eden bir programlama arayüzüdür. DOM, web tarayıcılarının dokümanlara erişmesine ve onları manipüle etmesine olanak tanır. DOM Stil ve Görsellik İşlemleri ise, DOM kullanarak web sayfalarındaki elementlerin stilini ve görünümünü değiştirmek için kullanılan tekniklerin bir bütünüdür.

DOM’un stil ve görsellik işlemleri, web sayfalarının görünümünü iyileştirmek, kullanıcı etkileşimini artırmak ve kullanıcı deneyimini geliştirmek için önemli bir rol oynamaktadır. Bu işlemler CSS (Cascading Style Sheets) kullanılarak gerçekleştirilir. CSS, elementlerin boyutunu, renklerini, yazı tipini, arka planını ve diğer stil özelliklerini kontrol etmek için kullanılan bir web teknolojisidir.

DOM stil ve görsellik işlemleriyle, web sayfalarındaki elementlerin stillerini ve görünümünü değiştirebiliriz. Örneğin, bir elementin metin rengini değiştirebilir, arka plan rengini ayarlayabilir, yazı tipini değiştirebilir veya elementin boyutunu kontrol edebiliriz. Bu işlemleri gerçekleştirmek için JavaScript kullanılır ve DOM API’si ile elementlere erişim sağlanır.

• Elementlerin stilini değiştirmek için CSS özelliklerini kullanabiliriz.
• Elementlere stil eklemek veya kaldırmak için className özelliğini kullanabiliriz.
• Elementlerin boyutunu ve konumunu ayarlamak için offsetWidth, offsetHeight, offsetLeft ve offsetTop gibi özellikleri kullanabiliriz.

DOM Stil ve Görsellik İşlemleri	Açıklama
getElementById()	Belirli bir ID’ye sahip bir elementi seçer.
getElementsByClassName()	Belirli bir sınıfa sahip tüm elementleri seçer.
getElementsByTagName()	Belirli bir etikete sahip tüm elementleri seçer.

DOM stil ve görsellik işlemlerini kullanarak web sayfalarının tasarımını ve görünümünü kolaylıkla yönetebiliriz. Bu sayede kullanıcıların web sayfalarıyla etkileşimi artar ve daha iyi bir kullanıcı deneyimi sağlanır. DOM’un sunduğu güçlü API’lerle elementlere kolayca erişebilir ve istediğimiz değişiklikleri yapabiliriz.

Sık Sorulan Sorular

DOM nedir?

DOM (Document Object Model), HTML, XML ve diğer dokümanlar için bir programlama arayüzüdür. Bu arayüz, dokümanın yapısını temsil eden bir dizi nesne sunar ve bu nesneleri kullanarak dokümanla çalışmayı sağlar.

DOM düğümleri ve özellikleri nelerdir?

DOM düğümleri, dokümanın farklı yapısını temsil eder. Her bir düğüm, bir element, bir metin veya başka bir tür olabilir. DOM düğümlerinin özellikleri arasında düğümün adı, değeri, atası, alt düğümleri ve diğer bazı özellikler bulunur.

DOM düğüm seçimi ve manipülasyonu nasıl yapılır?

DOM düğümlerini seçmek ve manipüle etmek için JavaScript kullanılır. getElementById(), getElementsByTagName(), getElementsByClassName() gibi yöntemler kullanılarak düğümler seçilebilir ve bu düğümlerin özellikleri ve değerleri değiştirilebilir.

DOM olayları ve işleyicileri nelerdir?

DOM olayları, tarayıcıda gerçekleşen etkileşimleri temsil eder. Örneğin, bir düğmeye tıklama, bir formun gönderilmesi veya bir klavye tuşunun basılması gibi olaylar. DOM olay işleyicileri, bu olayların nasıl ele alınacağını belirler ve belirli bir olay gerçekleştiğinde çalışacak JavaScript işlevleridir.

DOM düğüm ekleme ve silme nasıl yapılır?

DOM düğümlerine JavaScript kullanarak yeni düğümler eklemek veya mevcut düğümleri silmek mümkündür. createElement() ve createTextNode() gibi yöntemler kullanılarak yeni düğümler oluşturulabilir ve appendChild() veya removeChild() gibi yöntemler kullanılarak düğümler eklenebilir veya silinebilir.

DOM düğüm gezinme yöntemleri nelerdir?

DOM düğümleri arasında gezinmek için JavaScript’te bir dizi yöntem bulunur. parentNode, childNodes, firstChild, lastChild, nextSibling ve previousSibling gibi yöntemler kullanılarak düğümler arasında gezinilebilir.

DOM stil ve görsellik işlemleri nasıl yapılır?

DOM kullanılarak HTML elementlerinin stil ve görsellik özellikleri değiştirilebilir. Elementin stil özelliklerine JavaScript kullanarak erişilebilir ve değiştirilebilir. Örneğin, elementin arka plan rengi, yazı rengi, yazı boyutu gibi özellikleri değiştirilebilir.