JavaScript Notları VI-DOM (Document Object Model)
Doküman Obje Modeli (DOM)
97 — Doküman objesi nedir?
Doküman objesi, sayfa içerisinde gösterilen HTML dokümanını temsil eder. Doküman objesinin, doküman içeriğine erişme ve onu değiştirme gibi bazı özellikleri bulunur.
Dokümana erişme şekline ya da değiştirilme şekline genel olarak Doküman Obje Modeli ya da kısaca DOM denir.
Doküman objesi bize; open(), close(), write(), getElementById(), getElementByName(), getElementByTagName() gibi metotlar sağlar.
98 — DOM nedir?
Doküman Obje Modeli (DOM) HTML ya da XML sayfasını temsil eder. Programlar dokümanın yapısını, içeriğini ve stilini değiştirebilmektedir.
DOM, dokümanı objeler açısından olduğu gibi node’lar açısından da temsil eder.
DOM, bir web sayfasının obje yönelimli olarak temsilidir. (object oriented representation) JavaScript gibi betik (script) dilleri tarafından değiştirilebilirler.
99 — DOM node’ları nelerdir?
W3C HTML DOM standartlarına göre, HTML içindeki herşey node olarak temsil edilebilir.
Doküman node’u tüm dokümanı temsil eder.
Eleman node’u ise HTML, HEAD, BODY, A, H1 gibi HTML elemanlarını temsil eder.
Text node’u elemanın içindeki yazı içeriğini temsil eder.
Attribute node’u her bir HTML niteliğini temsil eder.
Node’un node hakkında bilgiler içeren bazı özellikleri bulunur.
“nodeName property” node’un ismini belirler.
“nodeValue property” node’un değerini belirler.
“nodeType property” node’un tipini belirler.
100 — id ile birlikte DOM içinde get element kullanımı.
getElementById() metodu, id kullanarak elemana ulaşmak için kullanılabilir.
Ör:
document.getElementById(“myUniqueId”);101 — DOM içinde class ile get element kullanımı.
getElementByClassName() metodu, class (sınıf) kullanarak elemana ulaşmak için kullanılanbilir.
Ör:
document.getElementByClassName(“myClass”);102 — Herhangi bir elemanın içeriğine ulaşmak.
innerHTML property, HTML elemanlarının içeriğine erişmek ve ya onları değiştirmek için kullanışlıdır.
103 — DOM level nedir?
W3C’ün DOM özellikleri farklı seviyelere bölünmüştür. Her seviye, gerekli ve opsiyonel olan bazı modüllerden oluşmaktadır.
Level 0: Düşük-seviye (low-level) bir arayüz seti sağlar.
Level 1: DOM level 1, iki kısımda açıklanabilir: CORE ve HTML.
CORE, herhangi bir yapılandırılmış dokümanı temsil edebilen, düşük-seviye (low-level) arayüzler sağlar.
HTML ise HTML dokümanını için kullanılabilecek yüksek-seviye (high-level) arayüzleri temsil eder.
Level 2: altı özellikten oluşmaktadır:
CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL ve RANGE.
CORE2, DOM level 1'de belirlenen CORE’un fonksiyonelliğini genişletir.
VIEWS: Programların dinamik şekilde dokümanlara ulaşmasını ve içeriğini değiştirmesine olanak sağlar.
EVENTS: Event’ler kullanıcıların web sayfası ile etkileşime girdiğinde yürütülen betiklerdir. (script)
STYLES: Programların dinamik şekilde dokümanlara ulaşmasına ve stil sayfalarının içeriğini değiştirmesine olanak sağlar.
TRAVERSAL: Programların dinamik şekilde doküman içinde baştan başa geçiş (traverse) yapmasını sağlar.
RANGE: Programların dinamik şekilde, doküman içeriğinin dağılımını (range) belirlemesine olanak sağlar.
Level3: beş farklı özellikten oluşmaktadır:
CORE3, LOAD, SAVE, VALIDATIONS, EVENTS ve XPATH.
CORE3: DOM level 2'de belirlenen CORE’un fonksiyonelliğini genişletir.
LOAD ve SAVE: Programların dinamik şekilde, XML dokümanınının içeriğini DOM dokümanınına yüklemesine ve DOM dokümanını XML dokümanına seri bir şekilde kaydetmesine olanak sağlar.
VALIDATION: Dokümanların içeriğinin ve yapısının dinamik olarak güncellenmesine (update) olanak sağlar. (dokümanın geçerli-valid olduğuna emin olarak)
EVENTS: DOM level 2'de belirlenen Event’lerin fonksiyonelliğini genişletir.
XPATH: DOM ağacına (DOM tree) erişmek için kullanılan bir path dilidir.
104 — Ertelenmiş (deferred) script nedir?
Varsayılan olarak Js dosyaları, HTML dokümanının çözümünü (parsing) kesintiye (interrupt) uğratacaktır. Çünkü onları getirip çalıştıracaktır (fetch and execute)
Erteleme (defer) özelliği, tarayıcıya script dosyasını sadece HTML dokümanı tamamen çözümlendikten sonra çalıştırmasını söyler.
<script defer src=”myscript.js”>Bu durum web sayfasının yüklenme zamanını azaltır ve web sayfası daha hızlı görüntülenir.
105 — Asenkron Script (asynchronous scripts) nedir?
Yine varsayılan olarak Js dosyaları, HTML dokümanının çözümünü (parsing) kesintiye (interrupt) uğratacaktır. Çünkü onları getirip çalıştıracaktır (fetch and execute)
Asenkron özelliği (async attribute) script dosyasının eş zamanlı olmayan şekilde (asynchronously) çalıştırılması için kullanılır.
<script async src=”somescript.js”>HTML çözümleyici (parser) script etiketine ulaştığında, onları getirip çalıştırmak için durmayacaktır. işletim, (execution) script’in hazır olduğu herhangi bir zaman (doküman çözümlemesi ile paralel olarak) gerçekleşebilir.
106 — Attribute ve property arasındaki fark nedir?
Attributes: id, type, value gibi eleman hakkında daha fazla detay sağlar.
Property: type=”text”, value=’Name’ gibi property’e atanan değerlerdir.
107 — innerHTML & innerText arasındaki fark nedir?
innerHTML: Bir string içinde bulunan HTML etiketini (tag) işler.
innerText: Bir string içindeki HTML etiketini (tag) işlemez.
108 — textContent & innerText arasındaki fark nedir?
textContent, node içerisindeki her elemanı geri döner.
innerText ise stilden (styling) haberdardır ancak “gizli” (hidden) elemanların yazısını (text) geri dönmeyecektir.
109 — HTMLCollection nedir?
HTMLCollection arayüzü, elemanların jenerik bir koleksiyonunu temsil eder (doküman düzeninde) ve listeden seçmek için bazı metotlar ve property’ler önerir.
HTMLCollection’ın, koleksiyondaki itemlerin sayısını geri dönen uzunluk property’si (length property) vardır.
HTMLCollection listesini, varsayılan şekilde “forEach” kullanarak yinelemek (iterate) mümkün değildir.
110 — NodeList nedir?
NodeList objeleri, genellikle properties tarafından geri döndürülen node koleksiyonlarıdır. Node.childNodes ve ya document.querySelectorAll() fonksiyonları gibi.
NodeList’in nodelist’teki node’ların sayısını geri dönen bir uzunluk property’si (length property) vardır.
for…of loop’ları, NodeList objeleri üzerinde isabetli olarak döngü (loop) yaparlar.
111 — Frames nedir?
Frame, sayfayı kısımlara böler ve her kısımda farklı bir sayfa görüntülenebilir.
Devamı gelecek…
Kaynaklar:
