We wprowadzeniu do tej serii pisze: „Elementy HTML to węzły tworzące obiektowy model dokumentu”. Omówiliśmy typy węzłów elementów. W tej sekcji omawiamy interfejsy API elementów, które umożliwiają wysyłanie zapytań do tych węzłów.
DOM i AOM
DOM to interfejs API służący do uzyskiwania dostępu do dokumentów i manipulowania nimi. DOM to drzewo wszystkich węzłów w dokumencie. Niektóre węzły mogą mieć elementy podrzędne, inne nie. Drzewo zawiera elementy wraz z ich atrybutami i węzłami tekstowymi.
Narzędzia przeglądarki nie udostępniają wizualizacji w postaci drzew jak powyższa, ale węzły możesz zobaczyć w inspektorze elementów.
Drzewo, które można sprawdzić w narzędziach dla programistów w przeglądarce, to drzewo ułatwień dostępu. AOM jest oparty na DOM; podobnie drzewo ułatwień dostępu zawiera obiekty reprezentujące wszystkie elementy znaczników, atrybuty i węzły tekstowe:
Interfejsy API elementu HTML
Środkowa litera w interfejsie DOM to „object”. Tak jak w przypadku obiektów person i car, które można znaleźć we wstępie do klas programowania zorientowanego na obiekty, każdy węzeł w drzewie dokumentu jest obiektem, którym można manipulować za pomocą JavaScriptu.
Przeglądarka ma wiele interfejsów API, które zapewniają natywne metody, zdarzenia oraz zapytania i aktualizowanie właściwości.
Węzły elementów zawierają informacje o wszystkich atrybutach tego elementu. Interfejsy HTML umożliwiają
dostęp do informacji o atrybutach elementów. Na przykład możemy użyć narzędzia HTMLImageElement.alt, aby uzyskać atrybuty alt wszystkich obrazów:
let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
console.log(imageInstance.alt);
});
Interfejsy HTML zapewniają nie tylko dostęp do atrybutów elementu, ale dają też dostęp do znacznie większej ilości informacji. Możemy znaleźć wartość HTMLElement.offsetHeight tylko do odczytu, aby poznać wysokość każdej sekcji na stronie względem układu.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
Jeśli użytkownik zmieni orientację urządzenia lub w inny sposób zmieni szerokość widocznego obszaru, wysokość każdego elementu <section> zmieni się, a właściwości DOM automatycznie zaktualizują się zgodnie z tą zmianą.
Interfejsy API interfejsu HTML nie mają ograniczonego dostępu do wartości atrybutów. DOM zapewnia wgląd w bieżący stan interfejsu użytkownika.
Interfejsy API HTML mają dostęp do wszystkich tych informacji. Aby określić, kiedy film (lub dźwięk) jest odtwarzany odpowiednio w trakcie bieżącego odtwarzania oraz czy już się zakończył, użyj tych wartości: HTMLMediaElement.duration, HTMLMediaElement.currentTime i HTMLMediaElement.ended.
Dostępne interfejsy elementów
Większość elementów HTML, które omówiliśmy do tej pory w tej serii, które jeszcze nie zostały omówione, poza niektórymi elementami podziału, ma powiązany interfejs DOM. Podstawowy interfejs dla wszystkich elementów ma prawidłową nazwę Element.
Element HTMLElement dziedziczy dane z elementu, a wszystkie interfejsy związane z elementami HTML dziedziczą z tego elementu. Niektóre interfejsy związane z elementami są implementowane przez wiele podobnych elementów.
Dostępne interfejsy:
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>
Konwencja nazewnictwa to „HTML”, po której następuje nazwa elementu lub grupy elementów pisana wielkimi literami, a po niej ciąg „Element”, ale część dotycząca elementu lub grupowania elementów nie ma dokładnie określonego wzorca. Nie przejmuj się. Nie trzeba ich zapamiętywać. Warto wiedzieć, że istnieją, aby w razie potrzeby zawsze można było je znaleźć.
Jeśli masz kolekcję elementów, dostępne są również interfejsy kolekcji. Na przykład metoda HTMLCollection.namedItem() zwraca pierwszy element w kolekcji, którego atrybut id lub name pasuje do parametru, albo wartość null, jeśli żaden element nie pasuje.
Ponad 30 elementów nie ma powiązanego interfejsu DOM innego niż HTMLElement, np. <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> i <hgroup>. Wiele elementów, które nie obsługują żadnych niewycofanych atrybutów nieglobalnych, ma interfejsy specyficzne dla elementów, np. HTMLPElement (element <p>) i HTMLUnknownElement (<😃> lub inne niezdefiniowane elementy), ale te interfejsy nie implementują żadnych dodatkowych właściwości ani metod nad właściwościami i metodami odziedziczonymi z HTMLElement i nie zostały wymienione powyżej.
Nadmiarowe metody i właściwości interfejsu API
Jeśli interfejs ma taką samą nazwę metody lub właściwości jak i interfejsu, który dziedziczy, metoda lub właściwość dziedziczenia zastępuje tę odziedziczoną. Podczas uzyskiwania dostępu do właściwości alt i offsetHeight za pomocą metod imageInstance.alt i sectionInstance.offsetHeight kod nie określił, do którego interfejsu API uzyskano dostęp.
Ogólnie rzecz biorąc, nie chodzi tutaj o problem. Jest to jednak możliwe. Na przykład obiekt HTMLCollection.length jest przeznaczony tylko do odczytu, a dziedzicząca właściwość „length” interfejsu HTMLOptionsCollection (zwracana tylko przez właściwość options obiektu <select>) może być również używana do ustawiania rozmiaru kolekcji.
Inne interfejsy
Istnieją dodatkowe interfejsy umożliwiające manipulowanie lokalizacjami gałęzi węzłów DOM. Odziedziczony interfejs EventTarget obejmujący addEventListener() i removeEventListener() jest dziedziczony przez interfejsy Node i Window. Z kolei interfejsy Element, Document i DocumentFragment (co widać w elementach niestandardowych) dziedziczą z węzła, a interfejs HTMLElement – z elementu.
Interfejs node
Każdy typ węzła DOM jest reprezentowany przez interfejs Node, który udostępnia informacje i metody związane z drzewem DOM. Interfejs Node umożliwia tworzenie zapytań i dodawanie węzłów do drzewa węzłów.
Słynna funkcja „walk the DOM” Douglasa Crockforda wykorzystuje właściwości firstChild węzła i nextSibling.
const walk_the_DOM = function walk(node, callback) {
callback(node);
node = node.firstChild;
while (node) {
walk(node, callback);
node = node.nextSibling;
}
};
Do definiowania elementów niestandardowych użyliśmy metod appendChild() i cloneNode() węzła.
Interfejs węzła udostępnia wiele przydatnych właściwości i metod do tworzenia zapytań i manipulacji DOM.
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));
}
});
Metoda attachShadow() jest metodą interfejsu Element. Dostępny jest też interfejs shadowRoot interfejsu Shadow DOM API renderowany niezależnie od głównego drzewa DOM dokumentu.
Interfejsy Document i HTMLDocument
Interfejs Document dziedziczy wartość z Node. Reprezentuje ona stronę internetową załadowaną w przeglądarce, niezależnie od tego, czy dokument jest w formacie HTML, SVG, XML, MathML itd. Interfejs Document dziedziczy też interfejs HTMLDocument.
Właściwość document zapewnia szybki dostęp do typów węzłów i możliwość tworzenia kolekcji elementów konkretnych typów, takich jak document.body i document.styleSheets. Pozwala on uzyskiwać dostęp do informacji powiązanych z dokumentem, które nie znajdują się w węzłach HTML, takich jak Document.location, Document.lastModified i Document.Cookie.
Dostępnych jest kilka interfejsów API opartych na funkcjach, które pojawiają się w interfejsie dokumentu, w tym Drag and Drop API i FullScreen API. Oba ustawienia dziedziczą z reguły Element.
Interfejs Window
Interfejs Window zawiera globalnie dostępne elementy spoza DOM, które można wykorzystać do manipulowania DOM. Okno zawiera funkcje, przestrzenie nazw, obiekty i konstruktory opisane w JavaScript i dokumentacji DOM w MDN.
Interfejs Window to interfejs API obiektu zawierającego dokument. Globalny obiekt window to okno, w którym działa skrypt. Każda karta przeglądarki zawiera własny obiekt Window. Interfejs Window może wysyłać zapytania o zawartość karty oraz o ogólne okno i urządzenie. Na przykład metoda resizeTo() może służyć do zmiany rozmiaru okna przeglądarki, natomiast właściwość devicePixelRatio zapewnia dostęp do pikseli wyświetlacza urządzenia. Podczas uzyskiwania dostępu do informacji o karcie, w której znajduje się treść, a nie do drzewa DOM, wyświetlana jest karta, z którego prawdopodobnie korzystasz, czyli okna, którego szukasz.
Dostępnych jest kilka interfejsów API opartych na funkcjach pojawiających się w interfejsie Window, w tym interfejsów API Web Workers i IndexedDB.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat interfejsów API HTML.
Co oznacza litera O w DOM?
Który interfejs może pomóc Ci dowiedzieć się więcej o karcie, na której znajduje się treść?