Document Object Model (DOM) Ne demektir?

React kodlarken karşılaştığım ReactDOM komutundaki DOM’un manasını merak etmiştim. Araştırdım ve bulgularımı sizle paylaşmak istedim. DOM, Object Oriented mantığının Document/HTML sayfalarına uygulanmış hali anladığım kadarıyla. Aşağıdaki Vikipedi makalesinden daha detaylı bilgi bulabilirsiniz. Malum ülkemizde yasaklı sizin için buraya kopyaladım. Kâr ve hit amacım yoktur.

Document Object Model, “DOM”, “Belge Nesnesi Modeli” anlamlarına da gelmektedir. İnternet tarayıcıları girilen internet sayfasını 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)

Sayfamızda bulunan bir resim nesnesi üzerinde fare üzerine getirilince kırmızı bir kenarlık, fare üzerinden çekilince mavi bir kenarlık olmasını istiyoruz. Bunu tarayıcıya yaptırabilmek için iki şekilde kod yazabiliriz.

1. yöntem

Doğrudan resim nesnesinin etiketi üzerinde scripti çalıştırabiliriz.

 <img src="https://www.elektronikotin.com/2018/08/document-object-model-dom-ne-demektir.html" 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ği yazmamız gerekir.

 <script type="text/javascript">  
function <b>kirmizi()</b>{
document.resim.style.border='1px solid red';
}
function <b>mavi()</b>{
document.resim.style.border='1px solid blue';
}
</script>

Daha sonra resim üzerinde yukarıdaki scriptimizi çalıştırabilmemiz için onMouseOver ve onMouseOut uygulamalarını kullanmamız yeterli olacaktır. Script resim isimli nesneyi bularak yapılması gereken müdahaleyi yapacaktır.

 <img src="https://www.elektronikotin.com/2018/08/document-object-model-dom-ne-demektir.html" border="1" name="resim" onMouseOver="kirmizi()" onMouseOut="mavi()">  

Birden fazla nesnede uygulanışı ise aşağıdaki gibi olabilir

Öncelikle aşağıdaki betik sayfada etiketi 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.elektronikotin.com/2018/08/document-object-model-dom-ne-demektir.html" border="1" onMouseOver="kirmizi(this)" onMouseOut="mavi(this)">  
<img src="https://www.elektronikotin.com/2018/08/document-object-model-dom-ne-demektir.html" border="1" onMouseOver="kirmizi(this)" onMouseOut="mavi(this)">

Fonksiyonların müdehale 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.

2008'den beri webdeyim.

Leave a Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir