Перейти к содержанию

HTML API

Узнайте, как можно раскрывать информацию HTML и манипулировать ею с помощью JavaScript.

Во введении к этой серии статей говорится: "Элементы HTML - это узлы, из которых состоит Document Object Model". Мы рассмотрели типы узлов элементов. В этом разделе мы рассмотрим API элементов, которые позволяют выполнять запросы к этим узлам.

DOM и AOM

DOM - это API для доступа к документам и манипулирования ими. DOM - это дерево всех узлов документа. Некоторые узлы могут иметь дочерние элементы, другие - нет. Дерево включает в себя элементы с их атрибутами и текстовые узлы.

Дерево узлов MLW, показывающее элементы и текстовые узлы.

Инструменты браузера не предоставляют визуализации дерева, подобной приведенной выше, но вы можете увидеть узлы в инспекторе элементов.

DOM/ARIA

Древовидное представление, которое можно проверить в инструментах разработчика браузера, - это дерево доступности. AOM основан на DOM; аналогичным образом дерево доступности содержит объекты, представляющие все элементы разметки, атрибуты и текстовые узлы:

Пример AOM.

API элементов HTML

Средняя буква DOM - "объект". Подобно примерам с объектами person или car из большинства вводных курсов по объектно-ориентированному программированию, каждый узел в дереве документа является объектом, которым можно манипулировать с помощью JavaScript.

Браузер предоставляет многочисленные API, обеспечивающие встроенную поддержку методов, событий, запросов и обновления свойств. Узлы элементов содержат информацию обо всех атрибутах, установленных для данного элемента. Для доступа к информации об атрибутах элемента можно использовать HTML-интерфейсы. Например, с помощью HTMLImageElement.alt можно получить атрибуты alt всех изображений:

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

HTML-интерфейсы предоставляют не только доступ к атрибутам элемента; можно получить доступ к гораздо большему количеству информации. Мы можем найти доступный только для чтения параметр HTMLElement.offsetHeight, чтобы получить высоту каждой секции на нашей странице относительно макета.

1
2
3
4
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
    console.log(sectionInstance.offsetHeight);
});

Если пользователь меняет ориентацию устройства или иным образом изменяет ширину области просмотра, то высота каждого <section> будет меняться, и свойства DOM будут автоматически обновляться вместе с ней.

API-интерфейс HTML не ограничивается доступом к значениям атрибутов. DOM предоставляет информацию о текущем состоянии пользовательского интерфейса. API-интерфейсы HTML могут получить доступ ко всей этой информации. Вы можете получить доступ к длительности видеоролика, к тому, где находится вид в текущем воспроизведении, и к тому, закончилось ли воспроизведение видео (или аудио) с помощью функций HTMLMediaElement.duration, HTMLMediaElement.currentTime и HTMLMediaElement.ended соответственно.

Доступные интерфейсы элементов

Большинство элементов HTML, которые мы уже рассмотрели в этой серии статей и которые нам еще предстоит рассмотреть, за исключением некоторых секционных элементов, имеют соответствующий интерфейс DOM. Базовый интерфейс для всех элементов носит меткое название Element. От Element наследуется HTMLElement, а от него - все специфические для HTML-элементов интерфейсы. Некоторые специфические для элементов интерфейсы реализуются несколькими похожими элементами.

К таким интерфейсам относятся:

В качестве именования используется слово "HTML", затем элемент или группа элементов в верхнем верблюжьем регистре, за которым следует "Element", но часть элемента или группы элементов не имеет точного соответствия. Не волнуйтесь. Нет необходимости их запоминать. Просто важно знать, что они существуют, чтобы при необходимости их можно было найти.

Если у вас есть коллекция элементов, то существуют интерфейсы коллекций. Например, метод HTMLCollection.namedItem() возвращает первый элемент в коллекции, атрибут id или name которого соответствует параметру, или null, если ни один элемент не соответствует.

Более 30 элементов не имеют связанного с DOM интерфейса, отличного от HTMLElement, включая <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> и <hgroup>. Многие элементы, которые не поддерживают никаких не устаревших, не глобальных атрибутов, имеют специфические интерфейсы, такие как HTMLPElement (элемент <p>) и HTMLUnknownElement (<😃> или любые другие элементы, которые не определены), но эти интерфейсы не реализуют никаких дополнительных свойств или методов поверх свойств и методов, унаследованных от HTMLElement, и не перечислены выше.

Избыточные методы и свойства API

Если интерфейс имеет такое же имя метода или свойства, как и наследуемый им интерфейс, то наследуемый метод или свойство перезаписывает наследуемый метод или свойство. Когда мы выше обращались к свойствам alt и offsetHeight с помощью imageInstance.alt и ectionInstance.offsetHeight соответственно, в коде не было указано, к какому API происходит обращение.

Обычно, как и в этих двух примерах, это не является проблемой. Однако она может возникнуть. Например, свойство HTMLCollection.length предназначено только для чтения, а наследующее свойство длины интерфейса HTMLOptionsCollection (возвращаемое только свойством options в <select>) также может быть использовано для установки размера коллекции.

Другие интерфейсы

Существуют дополнительные интерфейсы, позволяющие манипулировать расположением ветвей узлов DOM. Интерфейс EventTarget, предоставляющий нам возможности addEventListener() и removeEventListener(), наследуется интерфейсами Node и Window. В свою очередь, интерфейсы Element, Document и DocumentFragment (которые мы рассматривали в custom elements) наследуются от Node, а интерфейс HTMLElement - от Element.

Интерфейс node

Каждый тип узла DOM представлен интерфейсом на основе Node, который предоставляет информацию и методы, как элементы относятся к дереву DOM. Интерфейс Node позволяет запрашивать и добавлять узлы в дерево узлов.

Знаменитая функция Дугласа Крокфорда "прогулка по DOM" использует свойства Node firstChild и nextSibling.

1
2
3
4
5
6
7
8
const walk_the_DOM = function walk(node, callback) {
    callback(node);
    node = node.firstChild;
    while (node) {
        walk(node, callback);
        node = node.nextSibling;
    }
};

При определении пользовательских элементов мы использовали методы Node appendChild() и cloneNode(). Интерфейс Node предоставляет множество полезных свойств и методов для запросов и манипуляций с DOM.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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() является методом интерфейса Element. Существует также интерфейс shadowRoot для Shadow DOM API, визуализируемый отдельно от основного дерева DOM документа.

Интерфейсы Document и HTMLDocument

Интерфейс Document наследуется от Node. Он представляет веб-страницу, загруженную в браузер, независимо от того, является ли этот документ HTML, SVG, XML, MathML или другим. Интерфейс Document также наследуется от интерфейса HTMLDocument.

Document обеспечивает быстрый доступ к типам узлов и возможность создания коллекций определенных типов элементов, таких как document.body и document.styleSheets. HTMLDocument позволяет получить доступ к информации, относящейся к документу, которая не содержится в узлах HTML, например Document.location, Document.lastModified, и Document.Cookie.

На основе возможностей интерфейса документа существует несколько API, в том числе Drag and Drop API и FullScreen API. Оба они наследуются от Element.

Интерфейс Window

Интерфейс Window включает в себя глобально доступные элементы за пределами DOM, которые могут быть использованы для манипулирования DOM. Window предоставляет функции, пространства имен, объекты и конструкторы, документированные в MDN's JavaScript и DOM References.

Интерфейс Window является API для объекта, содержащего документ. Глобальный объект window - это окно, в котором выполняется скрипт. Каждая вкладка браузера содержит свой собственный объект Window. Интерфейс Window может запрашивать содержимое вкладки, а также всего окна и устройства. Например, метод resizeTo() может использоваться для изменения размеров окна браузера, свойство devicePixelRatio обеспечивает доступ к пикселям дисплея устройства. При получении информации о вкладке, в которой находится содержимое, а не о дереве DOM, в котором отображается вкладка, окно, скорее всего, является тем интерфейсом, который вы ищете.

На основе возможностей интерфейса Window доступно несколько API, в том числе API Web Workers и IndexedDB.

Источник: HTML APIs

Комментарии