Başlığın diğer anlamları için Model (anlam ayrımı) sayfasına bakınız.

| HTML |
| --- |
| * Dinamik HTML
* HTML5
	+ Article
	+ Audio
	+ Canvas
	+ Video
* XHTML
	+ Basic
	+ Mobile Profile
* HTML öğesi
	+ Meta
	+ Div ve span etiketleri
	+ Blink
	+ Marquee
* HTML özniteliği
	+ alt etiketi
* Frame etiketi
* HTML düzenleyicisi
* Karakter kodlamaları
	+ isimlendirilmiş karakterler
	+ Unicode
* Dil kodu
* DOM
* BOM
* Stil sayfaları
	+ CSS
* Font ailesi
* Web renkleri
* JavaScript
	+ WebGL
	+ WebCL
* W3C
	+ Doğrulayıcı
* WHATWG
* Quirks modu
* Web depolama
* İşleme motoru
 |
| 
Karşılaştırmalar |
| * Belge işaretleme dilleri
* Web tarayıcı motorları karşılaştırması
 |
| * g
* t
* d
 |

Web sayfalarındaki nesnelere örn. javascript
**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="resim.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="resim.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="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.

Kaynakça
--------

1. ↑  "What is the Document Object Model?" (İngilizce). 8 Mayıs 1999 tarihinde kaynağından arşivlendi. Erişim tarihi: 22 Haziran 2020.

| * g
* t
* d
World Wide Web Consortium |
| --- |
| Ürünler ve standartlar | 

|  |  |
| --- | --- |
| Tavsiyeler | Canonical XML • CDF • CSS • DOM • Geolocation API • HTML • ITS • MathML • OWL • P3P • PLS • RDF • RDF Schema • SISR • SKOS • SMIL • SOAP • SRGS • SSML• SVG • SPARQL • Timed Text • VoiceXML • WSDL • XForms • XHTML • XHTML+RDFa • XInclude • XLink • XML • XML Base • XML Encryption • XML Events • XML Information Set • XML namespace • XML Schema • XML Signature • XPath 1.0, 2.0 • XPointer • XProc • XQuery • XSL • XSL-FO • XSLT (elements) |
| Notlar | XAdES • XHTML+SMIL • XUP |
| Taslaklar | CCXML • CURIE • HTML5 • InkML • RIF • SCXML • SMIL Timesheets • sXBL • WICD • XFDL • XFrames • XBL • XHTML+MathML+SVG • XMLHttpRequest |
| Yönergeler | Web Content Accessibility Guidelines |
| İnsiyatif | Multimodal Interaction Activity • Markup Validation Service • Web Accessibility Initiative |
| Kullanım dışı | C-HTML • HDML • JSSS • PGML • VML |

 |
| Organizasyonlar | World Wide Web Foundation • SVG Working Group • WebOnt • W3C Device Description Working Group • WHATWG |
| Yazılım | Agora • Argo • Arena • Amaya • CERN httpd • Libwww • Line Mode Browser |
| Konferanslar | IW3C2 • World Wide Web Conference • WWW1 |

|  |  |
| --- | --- |
| Otorite kontrolü Bunu Vikiveri'de düzenleyin | 
* GND: 4680714-7
* LCCN: sh2006005140
* NLI: 987007566405605171

 |