Öğr. Gör. Serkan AKSU
http://www.serkanaksu.net
1
JavaScript HTML DOM (Document Object Model)
HTML DOM ile JavaScript HTML dokümanlarına erişip onları değiştirebilir.
Bir web sayfası yüklendiğinde , browser bir Document Object Model oluşturur.
HTML DOM model Object’lerin bir ağacı olarak oluşturulur.
JavaScript HTML DOM (Document Object Model)
Object Model sayesinde JavaScript dinamik HTML oluşturmanın bütün gücünü
kullanabilir.
• JavaScript sayfadaki bütün HTML elemanlarını değiştirebilir.
• Bütün HTML elemanlarının özelliklerini değiştirebilir.
• Sayfadaki bütün CSS stillerini değiştirebilir.
• Mevcut HTML elemanlarını ve özelliklerini sayfadan silebilir.
• Sayfaya yeni HTML elemanları ve özellikleri ekleyebilir.
• Sayfadaki mevcut HTML olaylarının (events) davranışlarını yeniden
düzenleyebilir.
• Sayfada yeni HTML olayları oluşturabilir.
JavaScript HTML DOM (Document Object Model)
DOM Nedir?
•DOM bir W3C (World Wide Web Consortium) standardıdır.
•DOM dökümanlara erişmek için bir standart tanımlar.
•W3C DOM standardı 3 farklı bölüme ayrılmıştır.
1.
Core DOM : Bütün doküman tipleri için standart model.
2.
XML DOM : XML dökümanları için standart model.
3.
HTML DOM : HTML dökümanları için standart model.
JavaScript HTML DOM (Document Object Model)
HTML DOM Nedir?
HTML DOM, HTML için bir Standart Nesne (Object) Modeli ve programlama
arabirimidir. HTML DOM şunları tanımlar.
• HTML elemanlarını Nesne olarak tanımlar.
• Bütün HTML elemanlarının özellikleri.
• Bütün HTML elemanlarına erişmek için Fonksiyonlar (Methodlar).
• Bütün HTML elemanları için Olaylar (Events).
Öte yandan HTML DOM, HTML elemanlarına nasıl erişileceği, değiştirileceği,
ekleneceği ve silineceği ile ilgili bir standartlar kümesidir diyebiliriz.
DOM Methods (Fonksiyonlar)
• DOM Method’lar, bir görevi yerine getiren fonksiyonlardır.
• DOM Property’ler, HTML elemanlarının değeri değiştirilebilen değerleridir.
• Bir HTML DOM’ a JavaScript ile erişilebilir.
getElementById Method
HTML elemanlarına genellikle ID’leri ile erişilir. Aşağıdaki örnekte ID’si intro olan
bir HTML elemanına erişilmiştir.
innerHTML Property
Bir HTML elemanının içeriğini elde etmenin en kolay yolu innerHTML özelliğini
kullanmaktır. innerHTML Property bir HTML elemanının içeriğini elde etmek ve
değiştirmek için kullanılır.
DOM Methods (Fonksiyonlar)
getElementById Method
HTML elemanlarına genellikle ID’leri ile erişilir.
innerHTML Property
innerHTML Property bir HTML elemanının içeriğini elde etmek ve değiştirmek
için kullanılır.
DOM Methods (Fonksiyonlar)
DOM Document
• Document object (nesne) web sayfasındaki diğer bütün nesnelerin sahibi
olarak görev yapar.
• Eğer bir HTML sayfasındaki nesnelere (object) erişmek istiyorsanız, işleme
sayfadaki document nesnesine erişerek başlamalısınız.
• Aşağıda doküman nesnelerine nasıl erişilebileceği be bunların nasıl
değiştirilebileceği gösterilmiştir.
DOM Document
HTML Elemanlarını Bulma
Method
Açıklama
document.getElementById()
Elemanı ID’si ile bul
document.getElementsByTagName()
Elemanı TAG adı ile bul
document.getElementsByClassName()
Elemanı class adı ile bul
HTML Elemanlarını Güncelleme
Method
Açıklama
element.innerHTML=
Bir elemanın inner HTML değerini
değiştir
element.attribute=
Bir HTML elemanının özelliğini değiştir
element.setAttribute(attribute,value)
Bir HTML elemanının özelliğini değiştir
element.style.property=
Bir HTML elemanının stilini değiştir
DOM Document
HTML Elemanlarını Ekleme ve Silme
Method
Açıklama
document.createElement()
Bir HTML elemanı oluştur
document.removeChild()
Bir HTML elemanını sil
document.appendChild()
Yeni bir HTML elemanı ekle
document.replaceChild()
Bir HTML elemanını değiştir
document.write(text)
Bir HTML elemanına veri yaz.
Olay İşleyicileri Ekleme
Method
Açıklama
document.getElementById(id).onclick=function()
{code}
OnCLick olayına bir olay
işleyici ekleme.
HTML Nesnelerini (Objects) Bulma
İlk HTML DOM, Level 1 1998’de 11 HTML nesnesini ve özelliklerini tanımlamıştır.
Bu kurallar HTML% için de halâ geçerlidir.
Sonraki HTML DOM Level 3’de yeni nesneler ve özellikleri eklenmiştir.
HTML Elemanlarını Tag Adı ile Bulma.
DOM’da HTML elemanlarını bulmanın en kolay yolu onların ID’lerini kullanmaktır.
Aşağıdaki örnekte p1 paragrafının içeriği p2 paragrafına aktarılmıştır.
HTML Elemanlarını Tag ve Class Adları ile Bulma.
DOM’da. Aşağıdaki örnekte id="main" olan elemanın içerisindeli <p> tagları
okunarak id="demo" olan elemana aktarılmıştır.
HTML Elemanlarına İndis İle Ulaşma
HTML elemanlarına
bir döngü kullanarak
indis numaraları ile
ulaşılabilir.
HTML Output Stream
HTML dökümanlarına document.write() fonksiyonu ile direkt çıktı verilebilir.
Aşağıdaki örnek günün tarihini sayfaya yazar.
Aşağıdaki örnek resim1.gif ola olan image içeriğini resim2.jpg olarak değiştirir.
DOM CSS
HTML Elemanlarının Stilini Değiştirme
Örnekte butona tıklandığında id=id1 olan elemanın stili değişecektir.
DOM CSS
Aşağıdaki örnekte
üzerine tıklanan
elemanın stili
değişecektir.
DOM Events (Olaylar)
Event’leri Aktif Hale Getirme
Aşağıdaki olaylardan biri meydana geldiğinde buna bağlı olarak belli eylemlerin
gerçekleşmesi sağlanabilir.
• onClick Kullanıcı mouse’a tıkladığında
• onLoad Sayfa yüklendiğinde
• onClick Bir image yüklendiğinde
• onMouseOver Mouse bir elemanın üzerine geldiğinde
• onChange Giriş <input> elemanı değiştiğinde
• onSubmit HTML form submit edildiğinde (gönderildiğinde)
• onKeyDown Kullanıcı bir tuşa bastığında
DOM Events (Olaylar)
Event’leri Aktif Hale Getirme
DOM Events (Olaylar)
OnChange
DOM Events (Olaylar)
OnMouseOver – OnMouseOut Olayları
Mouse elemanın üzerine geldiğinde (OnMouseOver) ve ayrıldığında
(OnMouseOut) meydana gelecek olaylar.
DOM Events (Olaylar)
OnMouseDown – OnMouseUp Olayları
Mouse elemanın üzerinde basılı tutulduğunda (OnMouseDown) ve serbest
bırakıldığında (OnMouseUp) meydana gelecek olaylar.
Download

JavaScript HTML DOM (Document Object Model)