DOM(document object model) aslında adından da anlaşılabileceği gibi dökümanın yani sayfanın bir obje modelidir. Web sayfası yüklendiğinde browser sayfaya ait bir obje modeli yaratır buna da document object model denir. HTML DOM tree yani ağaç yapısı olarak inşaa edilir.
yukarıda bir html ağaç yapısı gönderilmiştir. Konu içinde çoğunlukla bu yapıya gönderme yapılacaktır. Peki tam olarak nedir bu DOM TREE STRUCTURE yani document object model’in tree yapısı. Yukarıda gördüğünüz ağaç yapısı aslında bir html web kodunu temsil eder o da aşağıda verilmiştir.
<html> <head> <title> My Title </title> </head> <body> <h1> My Header </h1> <a href=""> My link </a> </body> </html>
yukarıdaki ağaç yapısı yukarıdaki kodu temsil eder ve kod ile aynı hiyerarşiye sahiptir. Ağaç yapısında yer alan her bir kareye NODE yani düğüm denir. Burdan yola çıkarak html sayfasındaki kodların her bir parçasının bir node olduğu sonucuna varabiliriz ( tag, attribute, tag içerisindeki textler, attribute valueları).Öncelikle şunu belirtmek isterim ki javascript tüm gücünü DOM yapısından almaktadır. Peki biz Javascript ve DOM kullanarak HTML üzerinde ne gibi değişiklikler yapabiliriz.
- Javascript ile sayfadaki tüm HTML elementlerini değiştirebiliriz.
- Javascript ile sayfadaki tüm HTML attributelarını değiştirebiliriz.
- Javascript ile sayfadaki tüm CSS stillerini değiştirebiliriz.
- Javascript ile sayfadaki varolan HTML elementlerini ve attributelarını silebiliriz.
- Javascript ile yeni bir HTML elementi ve attribute’u ekleyebiliriz.
- Javascript ile HTML sayfasında gerçekleşen tüm event’ları yakalayıp bunlara tepki verebiliriz.
- Javascript ile yeni HTML eventleri yaratabiliriz.
1. JAVASCRIPT İLE EVENT YAKALAMA
Aşağıdaki kod body blogunun içinde 2 kod satırından oluşmaktadır birincisi onclick event’ina sahiptir ve tiklandiğinda içerisinde refere edilen javascript fonksiyonu çalıştırılır.
ikincisi de onclick eventına sahiptir ancak button tipinde değildir. Burda önemli olan nokta onclick eventinin aslında sadece butonlar için geçerli olmadığıdır.CSS bilineler iyi bilirler ki CSS’de kutu
modeli vardır ve her elementin sayfada bir kapsamı vardır işte onclick o kapsam çerçevesinde tıklandığında tetiklenir.
onclick=”this.innerHTML=‘TIKLANDI’ ifadesi ile içinde bulunulan tag’e gönderme yapılıp innerHTML’i değiştirilmek istenmektedir.
<html> <head> <title> My Title </title> <script> function tik( ){ alert("butona tiklandi"); } </script> </head> <body> <h1> My Header </h1> <input type="button" value="tikla" onclick="tik( )" > My link </input > <h1 onclick="this.innerHTML='TIKLANDI'>Buraya tikla</h1> </body> </html>
2. JAVASCRIPT İLE ELEMENTLERİ ID UZERİNDEN YAKALAMAK
<html> <head> <title> My Title </title> <script> function tarih( ) { document.geteElementById("demo").innerHTML = Date( ); } </script> </head> <body> <h1> My Header </h1> <p id="demo" > TARIHI OGRENMEK İÇİN BUTONA TIKLAYIN </p> <input type="button" value="tıkla" onclick="tarih()"/> </body> </html>
- Bir diğer örnekte de sayfa açıldığı sırada çalışacak bir javascript fonksiyonu yazalım.
<html> <head> <script> function Merhaba(){ alert("sayfaya hosgeldiniz"); } </script> </head> <body onload="Merhaba( )"> <h1> SAYFA </h1> </body> </html>
3. JAVASCRIPT DOM İLE FORM İNPUTLARINI YAKALAMA VE DEĞİŞTİRME
<html> <head> <title> My Title </title> <script> function büyüt( ) { var x = document.getElementById("ad") x.value = x.value.toUpperCase(); } </script> </head> <body> <input type="text" id="ad" onchange="buyut()"/> </body> </html>
4. Diğer Özellikler
HTML Elementini Bulma
document.getElementById(id) : | Elementleri ID’den bulur. |
document.getElementsByTagName(name) : | Elementleri tag isminden bulur. |
document.getElementsByClassName(name) : | Elementleri class isminden bulur. |
HTML Elementini Değiştirme
element.innerHTML = new html content : | Bir elementin içini değiştirir. |
element.attribute = new value : | Bir elementin attribute value’sini değiştirir. |
element.setAttribute(attribute, value) : | Bir elementin attribute value’sini değiştirir. |
element.style.property = new style : | Bir elementin style’ini değiştirir. |
HTML Elementini Silme Ekleme
document.createElement(element) : | Html elementi yaratır. |
document.removeChild(element) : | Html elementi siler. |
document.appendChild(element) : | Html elementi ekler. |
document.replaceChild(element) : | Html elementiyle yer değiştirir. |
document.write(text) : | Write into the HTML output stream |