DOM API & элементы веб-браузера
Tools
Просмотреть DOM документа: https://software.hixie.ch/utilities/js/live-dom-viewer/
Элементы веб-браузера
Окно - это вкладка браузера, в которую загружается веб-страница; это представлено в JavaScript объектом
Window
. Используя методы, доступные для этого объекта, вы можете делать такие вещи, как возврат размера окна (см.Window.innerWidth
иWindow.innerHeight
), манипулировать документом, загруженным в этот window, хранить данные, специфичные для этого документа на стороне клиента (например, используя локальную базу данных или другой механизм хранения), присоединить обработчик событий (event handler) к текущему окну и многое другое.Навигатор представляет состояние и идентификатор браузера (т. е. пользовательский агент), как он существует в Интернете. В JavaScript это представлено объектом
Navigator
. Вы можете использовать этот объект для извлечения таких вещей, как геолокационная информация, предпочтительный язык пользователя, медиапоток с веб-камеры пользователя и т. д.Документ (представленный DOM в браузерах) представляет собой фактическую страницу, загруженную в окно, и представлен в JavaScript объектом
Document
. Вы можете использовать этот объект для возврата и обработки информации о HTML и CSS, содержащей документ, например, получить ссылку на элемент в DOM, изменить его текстовый контент, применить к нему новые стили, создать новые элементы и добавить их в текущий элемент как дочерний элемент, или даже вообще удалить его.
DOM API
Термины
Element node: элемент, как он существует в DOM.
Root node: верхний узел в дереве, который в случае
HTML
всегда является узлом HTML (другие словари разметки, такие как SVG и пользовательский XML, будут иметь разные корневые элементы)..Child node: узел непосредственно внутри другого узла. Например,
IMG
является дочерним элементомSECTION
в приведенном выше примере.Descendant node (узел потомок): узел внутри дочернего элемента. Например,
IMG
является дочерним элементомSECTION
в приведенном выше примере, и он также является потомком для родителяSECTION
.IMG
не является ребенкомBODY
, так как он находится на двух уровнях ниже дерева в дереве, но он является потомкомBODY
.Parent node: узел, в котором текущий узел. Например,
BODY
является родительским узломSECTION
в приведенном выше примере.Sibling nodes (одноуровневый узел): узлы, которые расположены на одном уровне в дереве DOM. Например,
IMG
иP
являются братьями и сестрами в приведенном выше примере.Text node: узел, содержащий текстовую строку.
Примеры взаимодействия с DOM
Last updated