Основы JavaScript: Изучаем работу с DOM! (Часть 1)

Основы JavaScript: Изучаем работу с DOM!

От автора: объектная модель документа, или «DOM», определяет логическую структуру документов HTML и по существу выступает в качестве интерфейса для веб-страниц. Благодаря использованию языков программирования, таких как JavaScript, мы можем получить доступ к DOM, чтобы управлять веб-сайтами и делать их интерактивными.

В этой статье мы рассмотрим объект document, дерево DOM и узлы. Мы также узнаем все о том, как получить доступ к элементам и, в целом, как происходит работа с DOM JavaScript. Давайте начнем!

Что такое DOM?

По своей сути веб-сайт должен состоять из HTML-документа index.html. Используя браузер, мы просматриваем веб-сайт, который отображает HTML-файлы и любые CSS-файлы, которые добавляют правила стиля и макета.

Браузер также создает представление этого документа, известное как объектная модель документа. Благодаря использованию DOM JavaScript может получать доступ и изменять содержимое и элементы веб-сайта.

Чтобы просмотреть DOM с помощью веб-браузера, кликните правой кнопкой мыши в любом месте страницы и выберите «Просмотреть код». Будут открыты Инструменты разработчика:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

DOM отображается на вкладке Элементы. Вы также можете просмотреть его, выбрав вкладку «Консоль» и введя «document».

Объект document

Объект document является встроенным объектом, содержащим множество свойств и методов. Мы обращаемся к этому объекту и манипулируем им с помощью JavaScript. А манипулируя DOM, мы можем сделать веб-страницы интерактивными! Поскольку мы больше не ограничены только созданием статических сайтов со стилизованным HTML-контентом.

Теперь мы можем создавать приложения, которые обновляют данные страницы без необходимости обновления страницы, мы можем дать пользователям возможность настраивать макет страницы, мы можем создавать элементы перетаскивания, браузерные игры, часы, таймеры и сложную анимацию. Работа с DOM открывает множество возможностей!

Итак, давайте выполним нашу первую манипуляцию с DOM… Перейдите на сайт www.google.com и откройте Инструменты разработчика. Затем выберите вкладку Консоль и введите следующее:

Нажмите 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 является его собственным узлом , который находится в корневом каталоге.

При работе с узлами 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, вы увидите значение выбранного вами узла. Чтобы проверить тип узла, запустите:

Будет отображено числовое значение типа узла, соответствующее выбранному узлу. Например, если бы вы выбрали h1, вы бы увидели 1. Сделав то же самое для текста, вы получите 3, и 8 для комментария.

И когда вы знаете, где находится узел в DOM, вам не нужно выбирать его вручную, вы можете получить к нему прямой доступ, например:

Вы также можете использовать nodeValue для получения значения узла текста или комментария, а также nodeName для получения имени тега элемента.

Доступ к элементам DOM

В этом разделе мы рассмотрим методы, которые можем использовать, чтобы получить доступ к элементам DOM: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() и querySelectorAll().

Мы будем работать с HTML-файлом, который состоит из множества элементов. HTML выглядит следующим образом:

Результат выглядит так…

getElementById()

Возможно, самый простой способ получить доступ к одному элементу в DOM — это его уникальный id. Для этого мы используем метод getElementById().

Чтобы получить доступ к элементу таким способом, он должен иметь атрибут id. Например:

При открытом в браузере HTML-файле откройте вкладку Консоль инструментов разработчика. И давайте возьмем этот элемент и присвоим его переменной с именем testId.

Мы можем увидеть результат в логе консоли:

И давайте убедимся, что мы получаем доступ к нужному элементу, задав для него некоторый стиль:

Примечание: мы рассмотрим изменение стиля позже в этой статье!

Наша страница теперь будет выглядеть так:

Получить доступ к элементу через его id достаточно просто, однако это может соединять вас одновременно только с одним элементом (так как id должен быть уникальным). Итак, давайте рассмотрим на еще несколько методов.

getElementsByClassName()

Когда мы хотим получить доступ к одному или нескольким элементам в DOM, мы можем получить доступ к ним по имени класса, используя getElementsByClassName().

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

В нашем примере у нас есть два элемента с классом test.

В консоли давайте получим оба этих элемента и добавим их в переменную с именем testClass.

Однако, если мы попытаемся изменить наши элементы так же, как мы это делали в предыдущем примере с ID, мы столкнемся с ошибкой!

Это не сработает, поскольку вместо доступа к одному элементу мы получаем доступ к нескольким элементам, которые хранятся в подобном массиву объекте.

При работе с массивами мы получаем доступ к элементам, используя порядковый номер, номера начинаются с 0. Таким образом, мы можем изменить наш элемент первого класса следующим образом:

И чтобы изменить все наши элементы класса, мы могли бы использовать цикл for:

Примечание. В следующих статьях я рассмотрю основы массивов и циклов.

Вот наш обновленный пример:

getElementsByTagName()

Еще один способ получить доступ к нескольким элементам — использовать имя HTML-тега getElementsByTagName().

Вот элементы section в нашем примере:

Давайте добавим их в переменную:

Опять же, мы работаем с подобными массиву объектами элементов, поэтому давайте изменим все теги section с помощью цикла for.

Селекторы запросов

Давайте рассмотрим последние методы доступа к элементам querySelector() и querySelectorAll().

Чтобы выбрать один элемент, мы используем метод querySelector(). Давайте перейдем к следующему элементу в нашем примере:

Поскольку это атрибут id, мы используем при назначении элемента хеш-символ #:

Если с помощью querySelector() было выбрано несколько экземпляров элемента, будет возвращен только первый. Чтобы собрать все элементы, соответствующие запросу, нужно использовать querySelectorAll(). Наш пример содержит два элемента с классом test-query-all:

Поскольку мы сейчас работаем с атрибутами class, мы используем для доступа к нашим элементам символ точки «.»:

И давайте используем метод forEach() для изменения стилей, например так:

Кроме того, методы селектора запросов могут работать с несколькими типами элементов. Например: querySelector(‘section, article’) будет соответствовать любому тегу, который встречается первым, а: querySelectorAll(‘section, article’) будет соответствовать всем тегам section и article в документе.

Методы выбора запросов очень мощные, их можно использовать для доступа к любому элементу или группе элементов в DOM — так же, как при выборе элементов в CSS.

Заключение

И это завершает часть 1! Мы узнали все о том, что такое DOM, и о работе с деревом DOM и узлами. Во второй части мы перейдем к обходу и изменению элементов.

Автор: Timothy Robards

Источник: https://itnext.io/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree