Главная » Получение элементов страницы. Объектная модель документа (DOM).

Получение элементов страницы. Объектная модель документа (DOM).


25.03.2021, 09:21
Объектная модель документа DOM (Document Object Model)

Объект Document представляет собой документ, отображаемый в окне или вкладке браузера.

Вложенные друг в друга HTML-элементы формируют дерево.

API-интерфейс (программный интерфейс) DOM отражает древовидную структуру HTML-документа.

Код

<html>
<head>
  <title>Document</title>
</head>
<body>
  <h1>Заголовок первого уровня</h1>
  <p>Это отдельный <i>параграф</i> в документе</p>
</body>
</html>

Для каждого HTML-дескриптора (тега) в документе имеется соответствующий объект Element в JavaScript, а для каждого фрагмента текста - объект Text.

Каждому типу HTML-дескриптора соответствует класс JavaScript и каждое вхождение дескриптора в документе представлено экземпляром этого класса.

Примеры:

Код

дескриптор <body> представлен экземпляром HTMLBodyElement

дескриптор <table> экземпляром HTMLTableElement

Для окна или вкладки браузера существует один глобальный объект.

Именно в глобальном объекте определена стандартная библиотека JavaScript - функция parseInt(), объект Math, класс Set и т.д.

Глобальный объект в веб-браузере определяет различные свойства, одним из которых является свойство window, которое ссылается на сам глобальный объект.

Выбор элементов страницы через CSS-селекторы

CSS-селекторы позволяют выбирать элементы по имени тега, по значению атрибута id и по присвоенному тегу классу:

Код

div /* любой элемент div */

#nav /* элемент с id = "nav" */

.warning /* любой элемент с именем warning в атрибуте class */

p[lang = "fr"] /* абзац, написанный на французском <p lang = "fr"> */

*[name = "x"] /* любой элемент с атрибутом name = "x" */

span.fatal.error /* любой элемент <span> с именами fatal и error в атрибуте class */

span[lang = "fr"].warning /* любой элемент <span> на французском с именем warning в атрибуте class */

Селекторы, задающие структуру документа:

Код

#log span /* любой потомок <span> элемента с id = "log" */

#log>span /* любой дочерний <span> элемента с id = "log" */

body>h1:first-child /* первый дочерний <h1> элемента <body> */

img + p.caption /* элемент <p> с именем caption в атрибуте class, расположенный сразу после <img> */

h2 ~ p /* любой элемент <p>, который следует после <h2> и является родственным ему */

button, input[type = "button"] // выборка элементов, которые соответствуют любому из селекторов;
все элементы <button> и <input type="button">

Методы querySelector() и querySelectorAll() в DOM позволяют внутри документа находить элемент(-ы) по заданному селектору CSS.

Метод querySelector() принимает в качестве аргумента строку селектора CSS и возвращает первый совпадающий элемент в документе (или null при отсутствии совпадений)

Код

let firstContainer = document.querySelector("#first"); // => поиск элемента с id = "first"

Метод querySelectorAll() возвращает все совпадающие элементы в документе в виде массивоподобного объекта (NodeList)

Код

let allTitles = document.querySelectorAll("h1, h2, h3"); // => поиск объектов Element для дескрипторов <h1>, <h2>, <h3>


NodeList имеет свойство length и может индексироваться подобно массивам.

NodeList является итерируемым, может использоваться для прохождения по нему с помощью цикла for и for/of.

NodeList возможно преобразовать в подлинный массив путём передачи его в метод Array.from()

NodeList, возвращённый от метода querySelectorAll(), при отсутствии совпадающих элементов в документе, имеет значение length равное 0.

Для NodeList доступен метод forEach()

Устаревшие методы выбора элементов

Код

document.getElementById("promo") /* устаревший метод, поиск элемента с id = "promo" */
document.querySelector("#promo") /* аналогичный новый метод */

let colors = document.getElementsByName("color") /* устаревший метод, поиск всех элементов с атрибутом name = "color" */
let colors = document.querySelectorAll('*[name = "color"]'); /* аналогичный новый метод */

let headings = document.getElementsByTagName("h1"); /* устаревший метод, поиск всех элементов <h1> в документе */
let headings = document.querySelectorAll("h1"); /* аналогичный новый метод */

let subHeads = sect.getElementsByTagName("h2"); /* найти все элементы <h2> внутри элемента sect */

let tooltips = document.getElementsByClassName("tooltip"); /* устаревший метод, найти все элементы с классом tooltip */
let tooltips = document.querySelectorAll(".tooltip"); /* аналогичный новый метод */

let sidebars = sect.getElementsByClassName("sidebar"); /* устаревший метод, найти всех потомков элемента sect, имеющих класс sidebar */
let sidebars = sect.querySelectorAll(".sidebar"); /* аналогичный новый метод */

Вышеперечисленные устаревшие методы поиска (кроме getElementById()) возвращают массивоподобный объект HTMLCollection, с динамически изменяемыми длиной и содержимым ( "активные объекты")

КОММЕНТАРИИ (0)

ТЕГИ МАТЕРИАЛА
NodeList, querySelectorAll(), dom, querySelector()
РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)