Bu serinin giriş bölümünde "HTML öğeleri, Belge Nesne Modeli'ni oluşturan düğümlerdir" ifadesi yer almaktadır. Öğe düğümlerinin türüne değindik. Bu bölümde, bu düğümleri sorgulamayı sağlayan öğe API'lerini ele alacağız.
DOM ve AOM
DOM, dokümanlara erişmeye ve belgelere müdahale etmeyi sağlayan bir API'dir. DOM, dokümandaki tüm düğümlerin ağacıdır. Bazı düğümlerde alt öğe olabilirken, diğerlerinde bulunamaz. Ağaçta öğeler, nitelikleri ve metin düğümleri yer alır.
Tarayıcı araçları, yukarıdaki gibi ağaç görselleştirmeleri sağlamaz, ancak düğümleri öğe inceleyicide görebilirsiniz.
Tarayıcı geliştirici araçlarında incelenebilen ağaç gösterimi, erişilebilirlik ağacıdır. AOM, DOM'yi temel alır. Benzer şekilde, erişilebilirlik ağacı da tüm işaretleme öğelerini, özellikleri ve metin düğümlerini temsil eden nesneleri içerir:
HTML Element API'leri
DOM'un ortadaki harfi "object"tir. Nesne odaklı programlama sınıflarının çoğuna giriş yapan person
veya car
nesne örneğinde olduğu gibi, belge ağacındaki her düğüm JavaScript ile değiştirilebilen bir nesnedir.
Tarayıcı, yerel olarak desteklenen yöntemler, etkinlikler, mülk sorgulama ve güncelleme işlemleri sağlayan çok sayıda API sağlar.
Öğe düğümleri, öğe üzerinde ayarlanan tüm özellikler hakkında bilgi içerir. Bir öğenin özellikleriyle ilgili bilgilere
erişmek için HTML arayüzlerini kullanabilirsiniz. Örneğin, tüm resimlerin alt
özelliklerini almak için HTMLImageElement.alt
kullanılabilir:
let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
console.log(imageInstance.alt);
});
HTML arayüzleri bir öğenin özelliklerine erişmekten daha fazlasını sağlar; çok daha fazla bilgiye erişebilirsiniz. Sayfamızdaki her bölümün düzene göre yüksekliğini öğrenmek için salt okunur HTMLElement.offsetHeight
öğesini bulabiliriz.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
Kullanıcı cihazının yönünü veya görüntü alanının genişliğini değiştirirse her bir <section>
öğesinin yüksekliği değişir ve DOM özellikleri de otomatik olarak bununla birlikte güncellenir.
HTML arayüzü API'ları, özellik değerlerine erişimle sınırlı değildir. DOM, kullanıcı arayüzünün mevcut durumuyla ilgili bilgi sağlar.
HTML API'leri bu bilgilerin tümüne erişebilir. Geçerli oynatmada videonun izlendiği ve videonun (veya sesin) oynatılması sona erdiği zaman HTMLMediaElement.duration
, HTMLMediaElement.currentTime
ve HTMLMediaElement.ended
simgeleriyle videonun uzunluğuna erişebilirsiniz.
Kullanılabilir öğe arayüzleri
Bu seride şimdiye kadar ele aldığımız ve henüz ele almadığımız çoğu HTML öğesi, bazı bölüm öğeleri dışında, ilişkili bir DOM arayüzüne sahiptir. Tüm öğelerin temel arayüzü en uygun şekilde Öğe olarak adlandırılır.
HTMLElement
, Element'tan ve tüm HTML öğesine özel arayüzler ondan devralır. Öğeye özgü bazı arayüzler, birden fazla benzer öğe tarafından uygulanır.
Arayüzler şunları içerir:
HTMLAnchorElement
-<a>
HTMLAreaElement
-<area>
HTMLAudioElement
-<audio>
HTMLBaseElement
-<base>
HTMLButtonElement
-<button>
HTMLCanvasElement
-<canvas>
HTMLDataElement
-<data>
HTMLDataListElement
-<datalist>
HTMLDetailsElement
-<details>
HTMLDialogElement
-<dialog>
HTMLEmbedElement
-<embed>
HTMLFieldSetElement
-<fieldset>
HTMLFormElement
-<form>
HTMLHtmlElement
-<html>
HTMLIFrameElement
-<iframe>
HTMLImageElement
-<img>
HTMLInputElement
-<input>
HTMLLabelElement
-<label>
HTMLLegendElement
-<legend>
HTMLLIElement
-<li>
HTMLLinkElement
-<link>
HTMLMapElement
-<map>
HTMLMediaElement
-<audio>
<video>
HTMLMenuElement
-<menu>
HTMLMetaElement
-<meta>
HTMLMeterElement
-<meter>
HTMLModElement
-<ins>
<del>
HTMLObjectElement
-<object>
HTMLOListElement
-<ol>
HTMLOptGroupElement
-<optgroup>
HTMLOptionElement
-<option>
HTMLOutputElement
-<output>
HTMLPictureElement
-<picture>
HTMLProgressElement
-<progress>
HTMLQuoteElement
-<q>
,<blockquote>
,<cite>
HTMLScriptElement
-<script>
HTMLSelectElement
-<select>
HTMLSlotElement
-<slot>
HTMLSourceElement
-<source>
HTMLStyleElement
-<style>
HTMLTableCellElement
-<td>
<th>
HTMLTableColElement
-<col>
<colgroup>
HTMLTableElement
-<table>
HTMLTableRowElement
-<tr>
HTMLTableSectionElement
-<thead>
,<tbody>
,<tfoot>
HTMLTemplateElement
-<template>
HTMLTextAreaElement
-<textarea>
HTMLTimeElement
-<time>
HTMLTitleElement
-<title>
HTMLTrackElement
-<track>
HTMLVideoElement
-<video>
Adlandırma kuralı, "HTML"dir. Ardından, büyük deve düzeninde bir öğe veya öğe grubu ve "Öğe" gelir. Ancak öğe veya öğe grubu bölümü tam bir kalıp izlemez. Endişelenmeyin. Bunları ezberlemeye gerek yoktur. İhtiyacınız olduğunda bulabilmeniz için var olduğunu bilmeniz önemlidir.
Bir öğe koleksiyonunuz varsa koleksiyon arayüzleri de vardır. Örneğin, HTMLCollection.namedItem()
yöntemi, koleksiyonda id
veya name
özelliği parametreyle eşleşen ilk öğeyi ya da hiçbir öğe eşleşmezse null değerini döndürür.
30'dan fazla öğenin HTMLElement
dışında ilişkili bir DOM arayüzü yok. Aralarında <address>
, <article>
,
<section>
, <nav>
, <header>
, <footer>
, <aside>
ve <hgroup>
yer alıyor. Kullanımdan kaldırılmamış, global olmayan özellikleri desteklemeyen birçok öğenin öğeye özgü arayüzleri vardır. Örneğin, HTMLPElement
(<p>
öğesi) ve HTMLUnknownElement
(<😃>
veya tanımlanmamış diğer öğeler) ancak bu arayüzler, HTMLElement
ürününden devralınan özellikler ve yöntemler üzerinde herhangi bir ek özellik veya yöntem uygulamaz ve yukarıda listelenmez.
Gereksiz API yöntemleri ve özellikleri
Bir arayüz, devraldığı yöntem veya mülk adına ve devraldığı arayüze sahipse, devralan yöntem veya özellik devralınanın üzerine yazar. Yukarıdaki alt
ve offsetHeight
özelliklerine imageInstance.alt
ve sectionInstance.offsetHeight
ile sırasıyla eriştiğimizde, kod hangi API'ye erişildiğini tanımlamıyor.
Bu iki örnekte olduğu gibi genellikle bu bir sorun değildir. Ama olabilir. Örneğin, HTMLCollection.length
salt okunurken devralan HTMLOptionsCollection
arayüzünün uzunluk özelliği (yalnızca <select>
öğesinin options
özelliği tarafından döndürülür) koleksiyon boyutunu ayarlamak için de kullanılabilir.
Diğer arayüzler
DOM düğümlerinin dal konumlarının değiştirilmesini sağlayan ek arayüzler bulunur. Bize addEventListener()
ve removeEventListener()
özelliklerini sağlayan EventTarget
arayüzü, Node
ve Window
arayüzleri tarafından devralınır. Element, Document ve DocumentFragment (özel öğelerde gördüğümüz) arayüzleri Node'dan, HTMLElement arayüzü ise Element'ten devralınır.
node
arayüzü
Her DOM düğümü türü, DOM ağacıyla ilişkili öğeler olarak bilgi ve yöntemler sağlayan Node
tabanlı bir arayüzle temsil edilir. Node
arayüzü, düğüm ağacına sorgu eklemeyi ve düğüm eklemeyi sağlar.
Douglas Crockford'un meşhur "yürüyüş DOM" işlevi, Node'un firstChild
ve nextSibling
özelliklerinden yararlanır.
const walk_the_DOM = function walk(node, callback) {
callback(node);
node = node.firstChild;
while (node) {
walk(node, callback);
node = node.nextSibling;
}
};
Özel öğelerin tanımlanmasında Düğümün appendChild()
ve cloneNode()
yöntemlerini kullandık.
Düğüm arayüzü, DOM'yi sorgulamak ve değiştirmek için birçok faydalı özellik ve yöntem sunar.
customElements.define('star-rating',
class extends HTMLElement {
constructor() {
super(); // Always call super first in constructor
const starRating = document.getElementById('star-rating-template').content;
const shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(starRating.cloneNode(true));
}
});
attachShadow()
yöntemi, Öğe arayüzü yöntemidir. Ayrıca, Shadow DOM API için belgenin ana DOM ağacından ayrı olarak oluşturulan bir shadowRoot
arayüzü vardır.
Document
ve HTMLDocument
arayüzleri
Document
arayüzü, Node
sürümünden devralır. Belge HTML, SVG, XML, MathML ya da başka bir biçim olup olmadığına bakılmaksızın, tarayıcıda yüklenen web sayfasını temsil eder. Document
arayüzü, HTMLDocument
arayüzünden de devralınır.
document
, düğüm türlerine hızlı erişim ve document.body
ile document.styleSheets
gibi belirli öğe türlerinin koleksiyonları oluşturma olanağı sağlar. HTMLDocument, Document.location
, Document.lastModified
ve Document.Cookie
gibi HTML düğümlerinde bulunmayan, dokümanla alakalı bilgilere erişimi sağlar.
Belge arayüzü üzerinden sunulan özelliklere bağlı olarak, Sürükle ve Bırak API'si ve Tam Ekran API'si gibi çeşitli API'ler mevcuttur. Her ikisi de Element
değerini devralır.
Window
arayüzü
Pencere arayüzü, DOM'yi değiştirmek için kullanılabilecek ve DOM'un dışında genel olarak kullanılabilir öğeler içerir. Pencere; MDN'nin JavaScript ve DOM Referanslarında belgelenen işlevler, ad alanları, nesneler ve kurucular sağlar.
Pencere arayüzü, belgeyi içeren nesnenin API'sidir. Genel window
nesnesi, komut dosyasının çalıştığı penceredir. Her tarayıcı sekmesi kendi Window nesnesini içerir. Pencere arayüzü, sekmenin içeriğinin yanı sıra genel pencere ve cihazı da sorgulayabilir. Örneğin, resizeTo()
yöntemi tarayıcı penceresini yeniden boyutlandırmak için kullanılabilir, devicePixelRatio
özelliği ise cihaz ekran piksellerine erişim sağlar. Sekmenin görüntülediği DOM ağacı yerine içeriğin bulunduğu sekmeyle ilgili bilgilere erişirken pencere, büyük olasılıkla aradığınız arayüzdür.
Pencere arayüzü üzerinden sunulan, Web Workers ve IndexedDB API'leri gibi özelliklere dayalı olarak çeşitli API'ler mevcuttur.
Öğrendiklerinizi sınayın
HTML API'leriyle ilgili bilginizi test edin.
DOM'deki O ne anlama gelir?
İçeriğin bulunduğu sekmeyle ilgili bilgilere ulaşmak için arayüzden hangisini kullanabilirsiniz?