От автора: объектная модель документа, или «DOM», определяет логическую структуру документов HTML и по существу выступает в качестве интерфейса для веб-страниц. Благодаря использованию языков программирования, таких как JavaScript, мы можем получить доступ к DOM, чтобы управлять веб-сайтами и делать их интерактивными.
В этой статье мы рассмотрим объект document, дерево DOM и узлы. Мы также узнаем все о том, как получить доступ к элементам и, в целом, как происходит работа с DOM JavaScript. Давайте начнем!
Что такое DOM?
По своей сути веб-сайт должен состоять из HTML-документа index.html. Используя браузер, мы просматриваем веб-сайт, который отображает HTML-файлы и любые CSS-файлы, которые добавляют правила стиля и макета.
Браузер также создает представление этого документа, известное как объектная модель документа. Благодаря использованию DOM JavaScript может получать доступ и изменять содержимое и элементы веб-сайта.
Чтобы просмотреть DOM с помощью веб-браузера, кликните правой кнопкой мыши в любом месте страницы и выберите «Просмотреть код». Будут открыты Инструменты разработчика:
DOM отображается на вкладке Элементы. Вы также можете просмотреть его, выбрав вкладку «Консоль» и введя «document».
Объект document
Объект document является встроенным объектом, содержащим множество свойств и методов. Мы обращаемся к этому объекту и манипулируем им с помощью JavaScript. А манипулируя DOM, мы можем сделать веб-страницы интерактивными! Поскольку мы больше не ограничены только созданием статических сайтов со стилизованным HTML-контентом.
Теперь мы можем создавать приложения, которые обновляют данные страницы без необходимости обновления страницы, мы можем дать пользователям возможность настраивать макет страницы, мы можем создавать элементы перетаскивания, браузерные игры, часы, таймеры и сложную анимацию. Работа с DOM открывает множество возможностей!
Итак, давайте выполним нашу первую манипуляцию с DOM… Перейдите на сайт www.google.com и откройте Инструменты разработчика. Затем выберите вкладку Консоль и введите следующее:
document.body.style.backgroundColor = 'orange';
Нажмите Enter, и вы увидите, что цвет фона теперь изменился на оранжевый. Конечно, вы не редактировали исходный код Google (!), но вы изменили способ отображения содержимого локально в вашем браузере, манипулируя объектом document.
document является объектом, свойство body которого мы выбрали для редактирования путем доступа к атрибуту style и изменения значения свойства backgroundColor на orange.
Обратите внимание, что в JavaScript мы используем способ написания имен backgroundColor, а не background-color, как в CSS. Любое свойство CSS через дефис будет записано в JavaScript в camelCase. Вы можете увидеть настройки DOM в разделе элемента body на вкладке Elements или набрав document.body в консоли.
Поскольку мы работаем в браузере напрямую с DOM, мы фактически не меняем исходный код. Если вы обновите браузер, все вернется в исходное состояние.
Дерево DOM и узлы
Во многом из-за структуры DOM, его часто называют Дерево DOM.
Дерево состоит из объектов, называемых узлами. Существует много разных типов узлов, но чаще всего вы будете работать с узлами элементов (элементы HTML), текстовыми узлами (любое текстовое содержимое) и узлами комментариев (закомментированный код). Объект document является его собственным узлом , который находится в корневом каталоге.
<!DOCTYPE html> <html> <head> <title>Nodes</title> </head> <body> <h1>This is an element node</h1> <!-- This is a comment node --> This is a text node. </body> </html>
При работе с узлами DOM их также называют родителями, потомками и элементами одного уровня, в зависимости от их связи с другими узлами.
В приведенном выше примере кода узел элемента html является родительским узлом, а элементы head и body являются его потомками. body содержит три дочерних узла (которые являются элементами одного уровня по отношению друг к другу — во многом похоже на семейное древо). Мы рассмотрим это позже в этой статье!
Как определить тип узла
Таким образом, у каждого узла в документе есть тип, мы можем получить доступ к типу, используя свойство nodeType. Полный список типов узлов вы можете найти здесь.
Давайте рассмотрим несколько примеров типов, которые существуют в нашем предыдущем примере. Наши html, title, body и h1 относятся к типу ELEMENT_NODE со значением 1.
Наш текст This is a text node., расположенный внутри body, который не находится внутри прочих элементов — это TEXT_NODE со значение 3. И наш комментарий <!— This is a comment node —> — это тип COMMENT_NODE со значением 8.
Как мы можем проверить типы узлов?
Перейдите на вкладку Элементы в инструментах разработчика и нажмите на любую строку. Вы увидите значение ==$0, отображаемое рядом с ней. Теперь, если вы перейдете на вкладку Консоль и введете значение $0, вы увидите значение выбранного вами узла. Чтобы проверить тип узла, запустите:
$0.nodeType;
Будет отображено числовое значение типа узла, соответствующее выбранному узлу. Например, если бы вы выбрали h1, вы бы увидели 1. Сделав то же самое для текста, вы получите 3, и 8 для комментария.
И когда вы знаете, где находится узел в DOM, вам не нужно выбирать его вручную, вы можете получить к нему прямой доступ, например:
document.body.nodeType; // 1
Вы также можете использовать nodeValue для получения значения узла текста или комментария, а также nodeName для получения имени тега элемента.
Доступ к элементам DOM
В этом разделе мы рассмотрим методы, которые можем использовать, чтобы получить доступ к элементам DOM: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() и querySelectorAll().
Мы будем работать с HTML-файлом, который состоит из множества элементов. HTML выглядит следующим образом:
<!DOCTYPE html> <html lang="en"> <head> <title>Master the DOM!</title> </head> <body> <h1>Master the DOM!</h1> <div id="test">I'm an ID</div> <div class="test">I'm a class</div> <div class="test">I'm another class</div> <section>I'm a tag</section> <section>I'm another tag</section> <div id="test-query">Use a query selector</div> <div class="test-query-all">Use query selector ALL</div> <div class="test-query-all">Use query selector ALL</div> </body> </html>
Результат выглядит так…
getElementById()
Возможно, самый простой способ получить доступ к одному элементу в DOM — это его уникальный id. Для этого мы используем метод getElementById().
document.getElementById();
Чтобы получить доступ к элементу таким способом, он должен иметь атрибут id. Например:
<div id="test">I'm an ID</div>
При открытом в браузере HTML-файле откройте вкладку Консоль инструментов разработчика. И давайте возьмем этот элемент и присвоим его переменной с именем testId.
const testId = document.getElementById('test');Мы можем увидеть результат в логе консоли:
console.log(testId); // output: <div id="test">I'm an ID</div>
И давайте убедимся, что мы получаем доступ к нужному элементу, задав для него некоторый стиль:
testId.style.backgroundColor = 'red';
Примечание: мы рассмотрим изменение стиля позже в этой статье!
Наша страница теперь будет выглядеть так:
Получить доступ к элементу через его id достаточно просто, однако это может соединять вас одновременно только с одним элементом (так как id должен быть уникальным). Итак, давайте рассмотрим на еще несколько методов.
getElementsByClassName()
Когда мы хотим получить доступ к одному или нескольким элементам в DOM, мы можем получить доступ к ним по имени класса, используя getElementsByClassName().
document.getElementsByClassName();
В нашем примере у нас есть два элемента с классом test.
<div class="test">I'm a class</div> <div class="test">I'm another class</div>
В консоли давайте получим оба этих элемента и добавим их в переменную с именем testClass.
const testClass = document.getElementsByClassName('test');Однако, если мы попытаемся изменить наши элементы так же, как мы это делали в предыдущем примере с ID, мы столкнемся с ошибкой!
testClass.style.backgroundColor = 'green'; // output: Uncaught TypeError: Cannot set property 'backgroundColor' of undefined at <anonymous>
Это не сработает, поскольку вместо доступа к одному элементу мы получаем доступ к нескольким элементам, которые хранятся в подобном массиву объекте.
console.log(testClass); // Output: HTMLCollection(2) [div.test, div.test]
При работе с массивами мы получаем доступ к элементам, используя порядковый номер, номера начинаются с 0. Таким образом, мы можем изменить наш элемент первого класса следующим образом:
testClass[0].style.backgroundColor = 'green';
И чтобы изменить все наши элементы класса, мы могли бы использовать цикл for:
for (i = 0; i < testClass.length; i++) { testClass[i].style.backgroundColor = 'green';
}Примечание. В следующих статьях я рассмотрю основы массивов и циклов.
Вот наш обновленный пример:
getElementsByTagName()
Еще один способ получить доступ к нескольким элементам — использовать имя HTML-тега getElementsByTagName().
document.getElementsByTagName();
Вот элементы section в нашем примере:
<section>I'm a tag</section> <section>I'm another tag</section>
Давайте добавим их в переменную:
const testTag = document.getElementsByTagName('section');Опять же, мы работаем с подобными массиву объектами элементов, поэтому давайте изменим все теги section с помощью цикла for.
for (i = 0; i < testTag.length; i++) { testTag[i].style.backgroundColor = 'blue';
}
Селекторы запросов
Давайте рассмотрим последние методы доступа к элементам querySelector() и querySelectorAll().
document.querySelector(); document.querySelectorAll();
Чтобы выбрать один элемент, мы используем метод querySelector(). Давайте перейдем к следующему элементу в нашем примере:
<div id="test-query">Use a query selector</div>
Поскольку это атрибут id, мы используем при назначении элемента хеш-символ #:
const testQuery = document.querySelector('#test-query');Если с помощью querySelector() было выбрано несколько экземпляров элемента, будет возвращен только первый. Чтобы собрать все элементы, соответствующие запросу, нужно использовать querySelectorAll(). Наш пример содержит два элемента с классом test-query-all:
<div class="test-query-all">Use query selector ALL</div> <div class="test-query-all">Use query selector ALL</div>
Поскольку мы сейчас работаем с атрибутами class, мы используем для доступа к нашим элементам символ точки «.»:
const testQueryAll = document.querySelectorAll('.test-query-all');И давайте используем метод forEach() для изменения стилей, например так:
testQueryAll.forEach(query => { query.style.backgroundColor = 'yellow';
});
Кроме того, методы селектора запросов могут работать с несколькими типами элементов. Например: querySelector(‘section, article’) будет соответствовать любому тегу, который встречается первым, а: querySelectorAll(‘section, article’) будет соответствовать всем тегам section и article в документе.
Методы выбора запросов очень мощные, их можно использовать для доступа к любому элементу или группе элементов в DOM — так же, как при выборе элементов в CSS.
Заключение
И это завершает часть 1! Мы узнали все о том, что такое DOM, и о работе с деревом DOM и узлами. Во второй части мы перейдем к обходу и изменению элементов.
Автор: Timothy Robards
Источник: https://itnext.io/
Редакция: Команда webformyself.