İçindekiler Tablosu
Giriş
DOM Nedir? (Document Object Model) adlı bu yazımızda DOM’un ne olduğuna, nasıl oluştuğuna, nasıl manipüle edildiğinde değindik.
Web sayfasının yapısını tanımlamak etkileşimli hale getirmek için oluşturulan bir modeldir. DOM’un 3 temek bölümü vardır.
- Core DOM
- XML DOM
- HTML DOM
Daha sonra Core DOM ve XML DOM kısımlarına değineceğiz. Bu yazımızda HTML DOM yapısını detaylı bir şekilde ele alacağız.
Eski web sayfalarının statik olduğunu hepimiz biliyoruz. Kullanıcı herhangi bir işlem için bir butona tıkladığında ya da bir veri girdiğinde sayfanın içeriğini değiştirmek için sayfanın yeniden yüklenmesi gerekirdi. Bu, küçük bir metni değiştirmek için bile tüm HTML tekrar yükleyen ve sadece sabit bilgiler gösteren dokümanlar gibiydi.
Modern dinamik web sayfalarıyla birlikte DOM (Document Object Model) kullanılarak kullanıcı butona basınca sayfa yenilenmeden başlık değişebilir hale geldi. Üstelik sunucuya hiç istek göndermeden, her şey tarayıcı içinde yapılmaya başlandı. Sadece bununla da sınırlı değil, dinamik İçerik güncelleme, kullanıcı etkileşimlerine anında tepki verme, daha az sunucu yükü, görsel değişiklikler yapabilme yeteneklerini JavaScript ile birlikte modern web ‘e kazandırdı.
DOM (Document Object Model) Nedir?
Bir ağaç düşünün. Bu ağaç, dallara ayrılan büyük bir gövdeden oluşuyor ve her dalın da daha küçük dalları ve yaprakları var. İşte bu ağaç, web sayfalarının nasıl yapılandırıldığını anlamak için güzel bir benzetme olabilir.
DOM (Document Object Model), HTML belgesinin yapısını bir ağaç şeklinde temsil eder. Sayfanın yapısını ağaç şeklinde modellediği için, her HTML öğesi bir node olarak tanımlanır. JavaScript ile bu öğelere erişmek, değiştirmek ya da etkileşim sağlamak için DOM üzerinde;
getElementById(): Tek bir öğeyi, benzersiz ID ile bulur.getElementsByClassName(): Aynı class’a sahip birden fazla öğeyi bulur.getElementsByTagName(): Aynı etikete sahip öğeleri bulur.querySelector(): CSS seçiciler kullanarak ilk eşleşen öğeyi bulur.querySelectorAll(): CSS seçiciler kullanarak tüm eşleşen öğeleri bulur.
gibi JavaScript yöntemleri kullanılır. Bu işlemler, DOM’a müdahale etmek ve öğeleri üzerinde işlem yapmak için gereklidir.
HTML öğelerini bulma işlemi, JavaScript ile sayfadaki elementlere erişim sağlamak için gereklidir. Bu sayede sayfa yenilenmeden; belirli öğelere tıklama, yazı ekleme, stil değişikliği gibi işlemleri yapabiliriz.
DOM Nasıl Çalışır?
Yukarıda DOM un ne olduğundan bahsetmiştik. Şimdi nasıl çalıştığını konuşalım. İlk olarak tarayıcı, web sayfasına ait HTML kodunu yukarıdan aşağıya okur ve her bir etiketi bir node olarak işler. Ardından HTML etiketleri, bir ağaç yapısı içinde organize edilir.
Örnek olarak bir html kodu yazalım ve bu web sayfamızın içeriğini göstersin.
<!DOCTYPE html>
<html>
<head>
<title>HacktorX</title>
</head>
<body>
<h1>DOM Nedir?</h1>
<a href="https://hacktorx.com">Buraya Tıkla</a>
</body>
</html>Tarayıcı bunu aşağıdaki gibi DOM ağacına dönüştürecektir. Bu işleme Tree Construction işlemi denir.
document
└── html
├── head
│ └── title ("HacktorX")
└── body
├── h1 ("DOM Nedir?")
└── a (href="https://hacktorx.com", "Buraya Tıkla")Peki sayfa bir CSS dosyası içeriyorsa ne olur? HTML belgesi içerisinde <style> , <link rel="stylesheet"> veya CSS dosyası varsa; tarayıcı bu CSS kurallarını ayrı bir ağaç yapısı olarak işleyecektir. Böylelikle CSSOM (CSS Object Model) adında bir ağaç yapısı oluşmuş olacaktır.
Örnek olarak bir CSS verisi yazalım ve CSSOM ağacı nasıl oluşuyor görelim.
h1 {
color: blue;
font-size: 24px;
}Tarayıcı bu CSS verisini işleyerek aşağıdaki gibi bir CSSOM ağacı oluşturacaktır.
Stylesheet
├── h1
├── color: blue
├── font-size: 24pxArdından DOM ve CSSOM birleşerek Render Tree adlı çizim ağacını oluşturur. Bu işlem yapının ekranda nasıl görüneceğini belirler. Bu nedenle display:none; gibi gizlenen öğelerle birlikte ekranda görünmeyen öğeler dahil edilmez.
Render Tree = DOM + CSSOM
Render Tree
└── h1 (color: blue, font-size: 24px)
├── "DOM Nedir?"
└── a (varsayılan stil: mavi, altı çizili)
├── "Buraya Tıkla"
Buradaki Render Tree’de yalnızca ekranda görüntülenecek öğeler sıralanır. Görünmeyen <head> ve <title> gibi içerikler Render Tree’ye dahil edilmez. Bunun yanında <h1> için belirtilen CSS stilleri uygulanırken, <a> etiketi için herhangi bir özel stil belirlenmediği için tarayıcı tarafından default stiller uygulanır. Böylelikle tarayıcı bu ağacı kullanarak sayfanın nasıl görüneceğini belirler.
Şimdi JavaScript ile DOM’ a etki ederek sayfa içeriğini nasıl değiştireceğinizden bahsedelim.
Web sayfalarını dinamik olarak değiştirebilmek için JavaScript ile DOM’a erişebilir, değiştirebilir, ekleyebilir ve bu elemanları silebilirsiniz.
JavaScript ile DOM’a Etki Etme
Şimdi çok kullanılan yöntemlerin bazılarına değineceğiz.
document nesnesi, JavaScript’te DOM’u temsil eden bir nesnedir. Web sayfalarındaki etiket, metin, görsel vb. içerikler ile etkileşim kurulmasını sağlar.
DOM Elemanlarına Erişim
document.getElementById('elementId');1. ID ile bir eleman seçer.
document.getElementsByClassName('className');2. Bir sınıfa ait tüm elemanları seçer.
document.getElementsByTagName('p');3. Belirtilen etiket ismine sahip tüm elemanları seçer.
document.querySelector('.className');4. CSS selector’ e göre tüm eşleşen elemanları seçer.
Eleman Özelliklerini Değiştirme
document.getElementById("header").innerHTML = "Yeni Başlık";ID değeri “header” olan elemanı bulur ve içeriğini değiştirir. Örneğin <h1 id="header">Eski Başlık</h1> olan içerik bu JS kodundan sonra <h1 id="header">Yeni Başlık</h1> olur.
NOT: Kullanıcıdan gelen veri direkt .innerHTML ile eklenirse XSS (Cross-Site Scripting) saldırılarına açık hale gelebilir. Bunun nedeni etiketlerin işlenmesi ve yorumlanmasındandır.
document.getElementById("myElement").textContent = "Yeni güvenli içerik";.textContent, .innerHTML‘ den farklı olarak HTML etiketlerini çalıştırmaz. Sadece düz metin olarak ekler. İçeriğin içinde HTML etiketleri varsa bile etiketler olduğu gibi görünür, işlenmez.
document.getElementById("myElement").style.fontSize = "20px";.style elemanın stil özelliklerini değiştirir.
İçerik Ekleme ve Silme
let newElement = document.createElement('p'); // Yeni bir <p> elemanı oluşturur
newElement.textContent = 'HacktorX metni'; // İçeriği belirler
document.body.appendChild(newElement); // Bu elemanı sayfanın sonuna ekler
let elementToRemove = document.getElementById('elementId'); // ID'si "elementId" olan HTML elementini seçer ve elementToRemove değişkenine atar.
elementToRemove.parentNode.removeChild(elementToRemove); // Elemanı DOM'dan siler.Olay ve Etkileşim
let button = document.getElementById('myButton'); // ID'si "myButton" olan HTML elementini seçer ve button değişkenine atar.
button.addEventListener('click', function() { // Butona tıklama olayını ekler.
alert('HacktorX is here!'); // Tıklanınca ekrana "HacktorX is here!" yazan bir uyarı (popup) gösterir.
});
Sonuç
Web sayfalarını daha etkileşimli ve dinamik hale getirmek için JavaScript ile DOM’a etki edilebilir. Bu sayede HTML içerikleri değiştirilebilir, eklenebilir be kullanıcının etkileşimlerine tepki verebilirsiniz.
DOM ile ilgili egzersizler yapmak için w3schools.com adresini ziyaret edebilir ve burada öğrendiklerinizin üzerine ekleyerek kendinizi geliştirebilirsiniz.
Diğer yazılarıma ulaşmak için buraya tıklayabilir, merak ettiğiniz ve anlamadığınız kısımlar için bana ulaşabilirsiniz.
Leave a Comment