Document Object Model, "DOM", "Belge Nesnesi Modeli" anlamlarına da gelmektedir. İnternet tarayıcıları girilen internet sitesini bir belge, bu belge (sayfa) içerisinde bulunan tüm elemanları da nesne olarak kabul eder. Buna göre resim, yazı, form gibi tüm elemanlar nesnedir. İşte DOM sayfa içindeki herhangi bir nesnenin özelliğine müdahale edebilmemize, nesne özelliklerini değiştirebilmemize olanak sağlar. Bunu yapabilmek için de JavaScript gibi bazı script dilleri kullanmamız gerekir.
Sayfada bulunan bir resim nesnesi üzerinde fare üzerine getirilince kırmızı bir kenarlık, fare üzerinden çekilince mavi bir kenarlık olması istendiğinde, bunun tarayıcıya yaptırılabilmesi için iki şekilde kod yazılabilir.
Doğrudan resim nesnesinin etiketi üzerinde script çalıştırılabilir.
<img src="resim.jpg" border="1" onMouseOver="'''this.style.border'''='1px solid red'" onMouseOut="'''this.style.border'''='1px solid blue'">
İlk olarak web sayfasımızın
<head>etiketi
</head>arasına (tavsiye edilir, zorunlu değildir) ya da herhangi bir yerine aşağıdaki betiğin yazılması gerekir.
<code>
Daha sonra resim üzerinde yukarıdaki scriptin çalıştırılabilmesi için
onMouseOver
ve onMouseOut
uygulamalarının kullanılması
yeterli olacaktır. Script resim
isimli nesneyi bularak yapılması
gereken müdahaleyi yapacaktır.
<img src="resim.jpg" border="1"
name
="
resim
" onMouseOver="
kirmizi()
" onMouseOut="
mavi()
">
Öncelikle aşağıdaki betik sayfada
<head>etiketi
</head>veya herhangi bir yere yazılır.
<code>
Daha sonra yine onMouseOver
ve onMouseOut
uygulamaları
kullanılır.
<img src="resim1.jpg" border="1" onMouseOver="'''kirmizi(''this'')'''" onMouseOut="'''mavi(''this'')'''">
<img src="resim2.jpg" border="1" onMouseOver="'''kirmizi(''this'')'''" onMouseOut="'''mavi(''this'')'''">
Fonksiyonların mudahale edeceği nesneyi tanıması için de this
koduyla fonksiyona (function
) tanımlama gönderilir. this
tanımlaması alan fonksiyon Obj
isimli tanımsız olan nesneyi
this
aracılığı ile tanımlayacak ve gereken müdahaleyi
yapacaktır.1
Orijinal kaynak: document object model. Creative Commons Atıf-BenzerPaylaşım Lisansı ile paylaşılmıştır.
Ne Demek sitesindeki bilgiler kullanıcılar vasıtasıyla veya otomatik oluşturulmuştur. Buradaki bilgilerin doğru olduğu garanti edilmez. Düzeltilmesi gereken bilgi olduğunu düşünüyorsanız bizimle iletişime geçiniz. Her türlü görüş, destek ve önerileriniz için iletisim@nedemek.page