HTML API'leri

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.

Öğeleri ve metin düğümlerini gösteren MLW Düğüm ağacı.

Tarayıcı araçları, yukarıdaki gibi ağaç görselleştirmeleri sağlamaz, ancak düğümleri öğe inceleyicide görebilirsiniz.

DOM/ARIA.

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:

AOM örneği.

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:

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?

Odaklıdır.
Tekrar deneyin.
Nesne.
Doğru.
Dış.
Tekrar deneyin.

İçeriğin bulunduğu sekmeyle ilgili bilgilere ulaşmak için arayüzden hangisini kullanabilirsiniz?

Pencere
Doğru.
Doküman
Tekrar deneyin.
Düğüm
Tekrar deneyin.