Interfejsy API HTML

We wprowadzeniu do tej serii czytamy: „Elementy HTML to węzły tworzące Obiektowy model dokumentu”. Omówiliśmy typ 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 umożliwiający dostęp do dokumentów i manipulowanie nimi. DOM to drzewo wszystkich węzłów w dokumencie. Niektóre węzły mogą mieć elementy podrzędne, a inne nie. Drzewo zawiera elementy wraz z ich atrybutami i węzłami tekstowymi.

Drzewo węzłów MLW przedstawiające elementy i węzły tekstowe.

Narzędzia przeglądarki nie udostępniają wizualizacji drzewa takich jak pokazana powyżej, ale węzły możesz zobaczyć w inspektorze elementów.

DOM/ARIA.

Reprezentacją drzewa, którą można sprawdzić w narzędziach dla programistów przeglądarki, jest drzewo ułatwień dostępu. Tabela AOM jest oparta na DOM, analogicznie – drzewo ułatwień dostępu zawiera obiekty reprezentujące wszystkie elementy znaczników, atrybuty i tekst. węzłów:

Przykład wartości AOM.

Interfejsy API elementów HTML

Środkowa litera wartości DOM to „object”. Tak samo jak w przykładzie obiektu person lub car z większości wprowadzenia do programowania zorientowanego na obiekt klas, każdy węzeł w drzewie dokumentu jest obiektem, którym można manipulować za pomocą kodu JavaScript.

Przeglądarka oferuje wiele Interfejsy API udostępniające natywnie obsługiwane metody, zdarzenia oraz zapytania i aktualizacje właściwości. Węzły elementów zawierają informacje o wszystkich atrybutach ustawionych w danym elemencie. Interfejsy HTML umożliwiają dostęp informacje o atrybutach elementów. Na przykład możemy użyć atrybutu HTMLImageElement.alt pobierz atrybuty alt wszystkich obrazów:

let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
  console.log(imageInstance.alt);
});

Interfejsy HTML dają nie tylko dostęp do atrybutów elementów. masz dostęp do wielu dodatkowych informacji. Możemy znajdź wartość HTMLElement.offsetHeight tylko do odczytu, aby poznać wysokość każdej sekcji naszej strony 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 zostaną zaktualizowane automatycznie.

Dostęp do wartości atrybutów nie jest ograniczony przy użyciu interfejsów API interfejsu HTML. DOM zapewnia wgląd w bieżący stan interfejsu użytkownika. Interfejsy API HTML mają dostęp do wszystkich tych informacji. Możesz sprawdzić długość filmu, podczas którego obejrzenie zostało wyświetlone, a jeśli odtwarzanie filmu (lub dźwięku) zakończyło się na HTMLMediaElement.duration, HTMLMediaElement.currentTime i HTMLMediaElement.ended.

Dostępne interfejsy elementów

Większość elementów HTML omówionych do tej pory w tej serii i nie została jeszcze omówiona. Poza niektórymi elementami sekcji z powiązanym interfejsem DOM. Podstawowy interfejs wszystkich elementów ma nazwę Element. HTMLElement dziedziczy dane z elementu oraz wszystkie związane z nim elementy HTML które są z niego dziedziczone. Niektóre interfejsy specyficzne dla elementów są zaimplementowane przez wiele podobnych elementów.

Interfejsy API obejmują:

Konwencja nazewnictwa to „HTML” po nim element lub grupa elementów pisany wielkimi literami i ciąg „Element”, ale część lub grupa elementów nie ma dokładnego wzorca. Nie przejmuj się. Nie musisz ich zapamiętywać. Warto wiedzieć, że istnieją, aby móc je w razie potrzeby sprawdzić.

Jeśli masz zbiór elementów, możesz też znaleźć interfejsy gromadzenia danych. Na przykład parametr Metoda HTMLCollection.namedItem() zwraca pierwszą wartość element w kolekcji, którego atrybut id lub name pasuje do parametru, lub wartość null, jeśli żaden element nie pasuje.

Ponad 30 elementów nie ma powiązanego interfejsu DOM innego niż HTMLElement, w tym <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> i <hgroup>. Wiele elementów, które nie obsługują żadnych niewycofanych elementów, atrybuty nieglobalne mają interfejsy specyficzne dla danego elementu, takie jak HTMLPElement (element <p>) czy HTMLUnknownElement. ( <😃> lub inne elementy, które nie są zdefiniowane), ale te interfejsy nie implementują żadnych dodatkowych właściwości ani metod nad właściwościami i metodami dziedziczonymi z HTMLElement i nie są 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 odziedziczony interfejs, metoda dziedziczenia lub właściwość zostaną zastąpione. tę odziedziczoną. Gdy uzyskaliśmy dostęp do właściwości alt i offsetHeight powyżej za pomocą parametrów imageInstance.alt i sectionInstance.offsetHeight odpowiednio kod nie wskazywał interfejsu API, do którego uzyskano dostęp.

Tak jak w przypadku tych 2 przykładów, nie stanowi to problemu. Jest to jednak możliwe. Na przykład HTMLCollection.length jest tylko do odczytu, a dziedziczający interfejs HTMLOptionsCollection Do ustawiania rozmiaru kolekcji może być też używana właściwość „length” (zwracana tylko przez właściwość options dla <select>).

Inne interfejsy

Istnieją dodatkowe interfejsy, które umożliwiają manipulowanie lokalizacjami gałęzi węzłów DOM. Interfejs EventTarget, który udostępnia us z addEventListener() i removeEventListener() jest dziedziczona przez interfejsy Node i Window. Z kolei interfejsy Element, Document i DocumentFragment (które widzieliśmy w elementach niestandardowych) dziedziczą interfejsy z węzła Node, a interfejs HTMLElement – z elementu Element.

Interfejs node

Każdy typ węzła DOM jest reprezentowany przez interfejs oparty na Node, który dostarcza informacji i metod jako elementy powiązane z drzewem DOM. Interfejs Node umożliwia wysyłanie zapytań i dodawanie węzłów do drzewa węzłów.

Słynny „walk the DOM” Douglasa Crockforda funkcja, korzysta z funkcji firstChild węzła i właściwości nextSibling.

const walk_the_DOM = function walk(node, callback) {
  callback(node);
  node = node.firstChild;
  while (node) {
    walk(node, callback);
    node = node.nextSibling;
  }
};

Użyliśmy interfejsu appendChild() węzła cloneNode() w definiowaniu elementów niestandardowych. Interfejs węzła udostępnia wiele przydatnych właściwości i metod do wykonywania zapytań i manipulowania elementami 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ą elementu za pomocą prostego interfejsu online. Dostępny jest też interfejs shadowRoot do Interfejs Shadow DOM API renderowany niezależnie od głównego drzewa DOM dokumentu.

Interfejsy Document i HTMLDocument

Interfejs Document dziedziczy dane z tabeli Node. Reprezentuje on wczytana w przeglądarce niezależnie od tego, czy dokument został zapisany w formacie HTML, SVG, XML, MathML, czy w innym formacie. Interfejs Document również dziedziczy dane z interfejsu HTMLDocument.

document umożliwia szybki dostęp do typów węzłów i możliwość tworzenia kolekcji określonych typów elementów, takich jak document.body i document.styleSheets. Plik HTMLDocument umożliwia dostęp do informacji związanych z dokumentem, który nie występują w węzłach HTML, takich jak Document.location, Document.lastModified i Document.Cookie.

Dostępnych jest kilka interfejsów API opartych na funkcjach pojawiających się w interfejsie dokumentów, w tym interfejs Drag and Drop API oraz FullScreen API. Oba typy zdarzeń są dziedziczone z elementu Element.

Interfejs Window

Interfejs Window zawiera globalnie dostępne elementy poza DOM, które można wykorzystać do manipulowania DOM. Okno zapewnia funkcji, przestrzeni nazw, obiektów i konstruktorów udokumentowanych w JavaScript MDN. i Odniesienia DOM.

Interfejs Window to interfejs API dla obiektu zawierającego dokument. Globalny obiekt window to okno, w którym jest uruchomiony skrypt. Każda karta przeglądarki zawiera własny obiekt Window. Interfejs Window może wysyłać zapytania o zawartość karty a także całe okno i urządzenie. Na przykład resizeTo() można użyć do zmiany rozmiaru okna przeglądarki, metoda devicePixelRatio umożliwia dostęp do pikseli wyświetlanych na urządzeniu. Podczas uzyskiwania dostępu do informacji na temat karty zawartość zamiast drzewa DOM wyświetlanego na karcie, jest to prawdopodobnie interfejs, którego szukasz.

Dostępnych jest kilka interfejsów API opartych na funkcjach interfejsu Window, w tym Web Workers i IndexedDB.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o interfejsach API HTML.

Co oznacza symbol O w modelu DOM?

Orientacja.
Spróbuj ponownie.
Obiekt.
Dobrze!
Zewnętrzne.
Spróbuj ponownie.

Który interfejs pomoże Ci uzyskać informacje o karcie, na której znajduje się dana treść?

Okno
Dobrze!
Dokument
Spróbuj ponownie.
Węzeł
Spróbuj ponownie.