Основы JavaScript: Изучаем элементы DOM! (Часть 2)

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

От автора: в этой статье мы узнаем все о том, как обходить элементы DOM в JavaScript, а также вносить в них изменения. Мы продолжаем тему, начатую в статье Изучаем DOM! (Часть 1). Итак, начнем!

Обход DOM

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

Наш файл выглядит в браузере так:

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

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

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

Корневые узлы

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

По умолчанию каждый документ содержит элементы html, head и body. Проверьте содержимое каждого из них, запустив в консоли следующее:

Родительские узлы

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

html является родителем head, body и script.

body является родителем h1, h2, p и ul, а не li так как li на два уровня ниже от body.

Мы можем проверить родителя элемента p, например, с помощью свойства parentNode. Поскольку мы присвоили p переменной, все что нам нужно сделать, это набрать:

Мы можем даже подняться на два уровня:

Дочерние узлы

Дочерними узлами являются узлы, которые находятся на один уровень ниже. Любые узлы за пределами одного уровня вложенности обычно называются дочерними. Есть целый ряд таких свойств, с которыми мы часто работаем: childNodes, firstChild, lastChild, children, firstElementChildи lastElementChild. Начнем со свойства childNodes, оно возвращает список всех дочерних элементов данного узла:

Возможно, вы ожидаете, что будут возвращены только три li? Узлы text фактически являются пробелами для установки отступов между элементами — которые DOM рассматривает в качестве узлов. Вы не можете видеть их на вкладке Элементы, так как Dev Tools автоматически удаляет эти узлы.

По этой причине, если мы попытаемся изменить цвет фона, например, первого дочернего узла, произойдет сбой, так как первый дочерний элемент является текстом.

Когда мы хотим работать только с узлами элементов, нам нужно использовать свойства children, firstElementChild и lastElementChild. ul.children вернул бы только три элемента li. И чтобы изменить только первый li, нам нужно использовать:

Вот наша обновленная страница:

Если мы хотим изменить все элементы children, мы могли бы использовать цикл for…of следующим образом:

Теперь для всех дочерних элементов цвет фона изменен:

Если мы посмотрим на элемент p, то увидим, что он содержит как текст, так и другие элементы (тег strong).

Свойство childNodes полезно, когда мы хотим получить доступ к этой информации. И childNodes, и children не возвращают стандартные массивы JavaScript (со всеми связанными с ними свойствами и методами), а скорее объекты, подобные массивам. Однако, как и в случае с массивом, вы можете получить доступ к узлам по номеру индекса или даже найти их свойство length.

С помощью этого кода мы найдем последний элемент четвертого дочернего li элемента ul из body и применим стиль…

Используя свойства parent и child, вы можете получить любой узел в DOM!

Узлы одного уровня

Давайте теперь рассмотрим одноуровневые узлы. Одноуровневый узел — это любой узел на одном уровне дерева в DOM. Они не обязательно должны быть одного и того же типа — узлы текста, элементы и комментарии могут быть одноуровневыми. Свойства, которые часто используются — nextSibling, previousSibling, nextElementSibling и previousElementSibling.

Свойства одноуровневого узла работают так же, как и для дочерних узлов: previousSibling и nextSibling получат узел, который непосредственно предшествует или следует за указанным узлом, previousElementSibling и nextElementSibling получат только узлы элемента. Давайте выберем средний элемент из нашего ul:

И давайте используем свойства Sibling для доступа к следующему и предыдущему элементам (не включая пробелы):

Эти изменения в действии:

Внесение изменений в DOM

Давайте теперь посмотрим, как мы можем добавлять, изменять, заменять и удалять узлы из DOM. Мы рассмотрим конкретные методы createElement() и createTextNode(), а также node.textContentи node.innerHTML.

Создание новых узлов

В этом разделе мы будем работать со следующим HTML:

Откройте вкладку Консоль в Инструментах разработчика. Давайте используем метод createElement() объекта document для создания нового элемента p.

Отлично! Переменная paragraph дает нам элемент p. Теперь мы можем добавить текст к элементу с помощью свойства textContent:

Таким образом, комбинируя createElement() и textContent мы можем создать узел элемента. Мы также можем использовать свойство innerHTML для добавления содержимого в элемент. С помощью этого свойства мы можем добавить как текст, так и HTML:

Из двух методов textContent лучше — он отображается немного быстрее, чем innerHTML. Также возможно создать текстовый узел, используя метод createTextNode():

Все эти методы создали новые элементы и текстовые узлы, однако они не видны во front-end веб-сайта до тех пор, пока не будут вставлены в документ!

Вставка узлов в DOM

Чтобы увидеть новые текстовые узлы и элементы, которые мы создаем во front end, нам нужно вставить их в document. Методы appendChild() и insertBefore() используются для добавления элементов в начало, середину или конец родительского элемента, а replaceChild() используются для замены старого узла новым. Давайте продемонстрируем это, добавив в HTML список:

И вот наша страница:

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

Теперь у нас есть полный элемент для нового элемента списка! Таким образом, мы можем добавить его в конец списка, используя appendChild():

И наш новый элемент li был добавлен в конец ul:

Чтобы добавить элемент в начало списка, давайте создадим еще один элемент (мы должны снова создать новый элемент, поскольку createElement() не может использовать его повторно):

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

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

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

Мы используем метод insertBefore(), чтобы добавить пункт в начало списка. Он будет принимать два аргумента, первый из которых будет новым дочерним узлом, который будет добавлен, а второй — это дочерний узел, который будет следовать сразу же за ним.

Таким образом для нашего примера мы добавим в начало списка новый элемент anotherNewItem:

И теперь наш новый узел был добавлен в начало списка! Давайте также рассмотрим, как мы можем заменить существующий узел новым, используя replaceChild(). Сначала мы создаем новый элемент:

replaceChild() также принимает два аргумента: сначала новый узел, а затем заменяемый узел.

В нашем примере мы заменяем третий дочерний элемент в списке:

Используя комбинацию appendChild(), insertBefore() и replaceChild() мы можем вставлять узлы и элементы в любом месте DOM!

Удаление узлов из DOM

Чтобы удалить узлы из DOM, мы можем использовать removeChild(), чтобы удалить дочерние узлы из их родителя, или remove() чтобы удалить сам узел. Возвращаясь к нашему примеру, давайте удалим последний элемент в списке:

И результат:

В качестве альтернативы, мы могли бы использовать remove(), чтобы удалить сам узел:

Используя removeChild() и remove(), вы можете удалить любой узел из DOM.

Изменение атрибутов, классов и стилей в DOM

В этом последнем разделе мы рассмотрим, как мы можем изменить атрибуты, классы и стили узлов HTML-элементов.

Изменение атрибутов

Атрибуты часто используются в HTML для предоставления дополнительной информации об элементе. Некоторые примеры — атрибут src тега img, атрибут href тега a, а также class, id и style. Возможно, вы также видели атрибуты, начинающиеся с data — это пользовательские атрибуты, которые мы также можем изменять.

Методы, которые мы используем в JavaScript для изменения атрибутов элемента:

hasAttribute() - возвращает логическое значение.

getAttribute() - возвращает значение определенного атрибута.

setAttribute() - добавляет или обновляет значение определенного атрибута.

removeAttribute() - удаляет атрибут из элемента.

Давайте используем следующий HTML в качестве примера:

Откройте консоль и проверьте методы атрибутов:

И давайте используем setAttribute(), чтобы назначить новое изображение для src:

Методы hasAttribute() и getAttribute() часто используются с условными операторами, в то время как setAttribute() и removeAttribute() чаще используются для непосредственного изменения в DOM.

Изменение классов

При работе с CSS мы используем классы для применения стилей к нескольким элементам. Давайте посмотрим, как мы можем работать с атрибутом класса в JavaScript, используя className и classList.

className - получает или задает значение класса.

classList.add() - добавляет значения класса.

classList.toggle() - включение или выключение класса.

classList.contains() - проверяет, существует ли значение.

classList.replace() - заменяет старое значение новым.

classList.remove() - удаляет значение.

Давайте рассмотрим каждый из этих методов на следующем примере:

И вот начальный вывод HTML:

Мы используем className для присвоения значений классам:

Теперь класс alert, определенный в HTML, был присвоен первому div:

Это переопределяет любые существующие классы элемента. Вы можете добавить несколько классов, используя className, если разделите имена классов пробелами. Другой способ изменить классы — это свойство classList, оно содержит несколько очень полезных методов:

После выполнения этих методов наш HTML будет выглядеть так:

Примечание: classList.add() добавляет новый класс в список существующих классов (не забывайте className переопределять любые существующие классы). Вы также можете добавить несколько классов в виде строк через запятую.

Изменение стилей

Обычно стили добавляются с помощью отдельных таблиц стилей CSS, однако бывают случаи, когда нам нужно использовать встроенный стиль — и полезно знать, как мы можем изменить его напрямую с помощью JavaScript! Давайте продемонстрируем это с помощью следующего HTML:

Наш начальный вывод:

При работе со свойствами CSS в DOM мы используем camelCase. Таким образом, вместо использования черточек, как это было бы с CSS, например border-radius, мы используем camelCase, например borderRadius. Где первое слово указывается в нижнем регистре, а все последующие слова указываются с большой буквы.

Примечание: мы могли бы использовать для изменения стилей setAttribute(), например. div.setAttribute(‘style’, ‘border-radius: 50%’); однако это удалит все существующие встроенные стили. Так что гораздо лучше использовать атрибут style напрямую. Наш вывод после добавления новых стилей:

Конечно, если нам нужно применить несколько изменений стиля, лучше применить их к классу в CSS и просто добавить новый класс к элементу через JavaScript.

Заключение

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

Автор: Timothy Robards

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

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

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

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

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

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

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

Смотреть

Метки:

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

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

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

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