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.
Nasıl kullanılır? (Örnek)
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.
1. yöntem
Doğrudan resim nesnesinin etiketi üzerinde script çalıştırılabilir.
<img src="https://www.wikipedia.tr-tr.nina.az/image/aHR0cHM6Ly93d3cud2lraXBlZGlhLnRyLXRyLm5pbmEuYXovaW1hZ2UvY21WemFXMHVhbkJuLmpwZw==.jpg" border="1" onMouseOver="this.style.border='1px solid red'" onMouseOut="this.style.border='1px solid blue'">
2. yöntem
İ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.
<script type="text/javascript">
function kirmizi(){
document.resim.style.border='1px solid red';
}
function mavi(){
document.resim.style.border='1px solid blue';
}
</script>
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="https://www.wikipedia.tr-tr.nina.az/image/aHR0cHM6Ly93d3cud2lraXBlZGlhLnRyLXRyLm5pbmEuYXovaW1hZ2UvY21WemFXMHVhbkJuLmpwZw==.jpg" border="1" name="resim" onMouseOver="kirmizi()" onMouseOut="mavi()">
Birden fazla nesnede uygulanışı ise aşağıdaki gibi olabilir
Öncelikle aşağıdaki betik sayfada <head>etiketi</head> veya herhangi bir yere yazılır.
<script type="text/javascript">
function kirmizi(Obj){
Obj.style.border='1px solid red';
}
function mavi(Obj){
Obj.style.border='1px solid blue';
}
</script>
Daha sonra yine onMouseOver
ve onMouseOut
uygulamaları kullanılır.
<img src="https://www.wikipedia.tr-tr.nina.az/image/aHR0cHM6Ly93d3cud2lraXBlZGlhLnRyLXRyLm5pbmEuYXovaW1hZ2UvY21WemFXMHhMbXB3Wnc9PS5qcGc=.jpg" border="1" onMouseOver="kirmizi(this)" onMouseOut="mavi(this)">
<img src="https://www.wikipedia.tr-tr.nina.az/image/aHR0cHM6Ly93d3cud2lraXBlZGlhLnRyLXRyLm5pbmEuYXovaW1hZ2UvY21WemFXMHlMbXB3Wnc9PS5qcGc=.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.
Kaynakça
- ^ (İngilizce). 8 Mayıs 1999 tarihinde kaynağından arşivlendi. Erişim tarihi: 22 Haziran 2020.
wikipedia, wiki, viki, vikipedia, oku, kitap, kütüphane, kütübhane, ara, ara bul, bul, herşey, ne arasanız burada,hikayeler, makale, kitaplar, öğren, wiki, bilgi, tarih, yukle, izle, telefon için, turk, türk, türkçe, turkce, nasıl yapılır, ne demek, nasıl, yapmak, yapılır, indir, ücretsiz, ücretsiz indir, bedava, bedava indir, mp3, video, mp4, 3gp, jpg, jpeg, gif, png, resim, müzik, şarkı, film, film, oyun, oyunlar, mobil, cep telefonu, telefon, android, ios, apple, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, pc, web, computer, bilgisayar
Document Object Model DOM Belge Nesnesi Modeli anlamlarina da gelmektedir Internet tarayicilari girilen internet sitesini bir belge bu belge sayfa icerisinde bulunan tum elemanlari da nesne olarak kabul eder Buna gore resim yazi form gibi tum elemanlar nesnedir Iste DOM sayfa icindeki herhangi bir nesnenin ozelligine mudahale edebilmemize nesne ozelliklerini degistirebilmemize olanak saglar Bunu yapabilmek icin de JavaScript gibi bazi script dilleri kullanmamiz gerekir Web sayfalarindaki nesnelere orn javascriptNasil kullanilir Ornek Sayfada bulunan bir resim nesnesi uzerinde fare uzerine getirilince kirmizi bir kenarlik fare uzerinden cekilince mavi bir kenarlik olmasi istendiginde bunun tarayiciya yaptirilabilmesi icin iki sekilde kod yazilabilir 1 yontem Dogrudan resim nesnesinin etiketi uzerinde script calistirilabilir lt img src https www wikipedia tr tr nina az image cmVzaW0uanBn jpg border 1 onMouseOver b this style border b 1px solid red onMouseOut b this style border b 1px solid blue gt 2 yontem Ilk olarak web sayfasimizin lt head gt etiketi lt head gt arasina tavsiye edilir zorunlu degildir ya da herhangi bir yerine asagidaki betigin yazilmasi gerekir lt script type text javascript gt br function b kirmizi b br document i resim i style border 1px solid red br br function b mavi b br document i resim i style border 1px solid blue br br lt script gt Daha sonra resim uzerinde yukaridaki scriptin calistirilabilmesi icin b onMouseOver b ve b onMouseOut b uygulamalarinin kullanilmasi yeterli olacaktir Script b resim b isimli nesneyi bularak yapilmasi gereken mudahaleyi yapacaktir lt img src https www wikipedia tr tr nina az image cmVzaW0uanBn jpg border 1 b name b i resim i onMouseOver b kirmizi b onMouseOut b mavi b gt Birden fazla nesnede uygulanisi ise asagidaki gibi olabilirOncelikle asagidaki betik sayfada lt head gt etiketi lt head gt veya herhangi bir yere yazilir lt script type text javascript gt br function b kirmizi b i Obj i b b br i Obj i style border 1px solid red br br function b mavi b i Obj i b b br i Obj i style border 1px solid blue br br lt script gt Daha sonra yine b onMouseOver b ve b onMouseOut b uygulamalari kullanilir lt img src https www wikipedia tr tr nina az image cmVzaW0xLmpwZw jpg border 1 onMouseOver b kirmizi i this i b onMouseOut b mavi i this i b gt lt img src https www wikipedia tr tr nina az image cmVzaW0yLmpwZw jpg border 1 onMouseOver b kirmizi i this i b onMouseOut b mavi i this i b gt Fonksiyonlarin mudahale edecegi nesneyi tanimasi icin de this koduyla fonksiyona function tanimlama gonderilir this tanimlamasi alan fonksiyon b Obj b isimli tanimsiz olan nesneyi this araciligi ile tanimlayacak ve gereken mudahaleyi yapacaktir Kaynakca Ingilizce 8 Mayis 1999 tarihinde kaynagindan arsivlendi Erisim tarihi 22 Haziran 2020