В этой части учебника, рассмотрим работа с DOM в JavaScript, в начале мы посмотрим что это вообще такое, а потом какие есть инструменты для работы с этим.
Что такое DOM:
DOM расшифровывается как «Document Object Model» или если на русском, то «объектная модель документа», если более понятным языком, то это универсальный язык создания интерфейсов, который работает не зависимо от платформы, например, HTML или XML.
Суть работы с ними заключается в том, что вы можете взаимодействовать с документами на этом языке, менять, создавать или удалять содержимое, что крайне удобно.
Также, DOM можно сказать это дерево, так как, оно имеет дочерние и родительские элементы, посмотрите на схему ниже.
На картинки видно, что все элементы которые ниже это дочерние, а выше получается родительские, то есть, для элемента div на картинки, дочерними будут h2 и p, тогда как родительский будет body.
Работа с DOM в JavaScript:
Теперь перейдём к работе c DOM в языке программирования JavaScript, для начала посмотрим какие методы используется для получения элементов.
- querySelector() — Берёт один элемент по селектору;
- querySelectorAll() — Берёт все элементы которые есть по селектору;
- getElementById() — Берёт элемент по айдишнику;
- getElementsByClassName() — Берёт элемент по классу;
- getElementsByTagName() — Берёт элемент по тегу;
Я не буду все методы разбирать, так как, они все похожи, покажу только как работать с первыми двумя, которые берут элементы по его CSS селектору.
Сделаем не большой пример, мы покрасим все строчные элементы которые имеют класс red в красный цвет, но для начала сделаем HTML код.
1 2 3 4 5 6 | <h1 class="red">Красный заголовок</h1> <p class="green">Зелёный абзац</p> <h2 class="green">Зелёный заголовок h2</h2> <p class="green">Зелёный абзац</p> <p class="red">Красный абзац</p> <p class="red">Красный абзац</p> |
Мы тут используем два класса, red и green, сначала сделаем все элементы которые должны быть красные, красными, а все элементы которые должны быть зелёными, соответственно зелёными, это с классом green.
1 2 3 | let textRed = document.querySelector(".red"); textRed.style.color = "red"; |
Тут мы берём элемент по его селектору, также, из нового тут есть новый параметр, style, он хранит в себе значение стилей и благодаря ему вы можете менять их в каждом элементе, в нашем случае изменяем цвет текста, вот результат.
Как вы видите, тут красится только один элемент, хотя у нас с этим классом их три, всё потому что, мы используем querySelector(), который получает первый элемент по селектору, что бы изменить их все, нужно использовать querySelectorAll(), он вернёт массив всех элементов с этим селектором.
После этого, как получим массив, проходимся по нему с помощью цикла и меняем цвет каждого объекта, вот новый код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Берем все элементы класса red let textRed = document.querySelectorAll(".red"); // Берем все элементы класса green let textGreen = document.querySelectorAll(".green"); // Проходим по массиву textRed for (let i = 0; i < textRed.length; ++i) { // Меняем цвет текста на красный textRed[i].style.color = "red"; } // Проходим по массиву textGreen for (let i = 0; i < textGreen.length; ++i) { // Меняем цвет текста на зелёеный textGreen[i].style.color = "green"; } |
То есть как я и писал, выше, но сейчас ещё мы будем менять элементы класса green, вот результат.
Как видите всё работает так как надо.
Дочерние и родительские элементы:
Теперь перейдём к дочерним и родительским элементам в JavaScript, для этого у каждого элемента есть свойства, которые ссылается на семью.
- childNodes — Возвращает массив дочерних элементов;
- firstChild — Возвращает первый дочерний элемент;
- lastChild — Возвращает последний дочерний элемент;
- previousSibling — Возвращает предыдущий элемент;
- nextSibling — Возвращает следующий элемент;
- parentNode — Возвращает родительский элемент;
Их не так уж много, но показывать как работать с ними не буду, так как, там не чего сложно нет, вы просто берёте и и работаете с ними как обычно.
Создание и удаление элемента:
Последние что мы рассмотрим, это создание новых элементов и удаление старых, но сначала посмотрим как именно создать, для этого вам нужно использовать createElement('div'), тем самым сделать объект div, после этого вы можете добавлять в него текст, классы, стили и так далее, вот не большой пример.
1 2 3 4 5 6 7 8 9 | // Создаём новый элемент let p = document.createElement("p"); // Добавляем в текст p.innerHTML = "Hello World!"; // Делаем текст красным p.style.color = "red"; // Добавляем новый элемент в body document.body.append(p); |
В начале мы создаём новый элемент <p>, потом, с помощью innerHTML, добавили в него текст и чуть ниже изменили его цвет на красный, дальше вывели этот элемент благодаря append(), которая выводит объект в конце элемента, в нашем случае в начале body, вот результат.
Как видите всё работает так как надо, но давайте подробнее разберём append(), с помощью его вы добавляете новый объект, в конец другого объекта, также, в качестве параметра он использует, элемент или строку.
Ещё нужно рассказать о подобных методах, они работают аналогичным способом и принимают те же параметры, вот их список:
- append() — Добавляет элемент в конец;
- prepend() — Добавляет элемент в начало;
- before() — Вставляет элемент перед другим;
- after() — Вставляет элемент после другого;
- replaceWith() — Меняет элемент;
Также, вы можете удалять или копировать объект, для этого есть ещё два метода.
- remove() — Удаляет элемент;
- cloneNode() -Клонирует элемент;
Стоит рассмотреть cloneNode(), так как, он может принимать в себя один параметр, который отвечает зато, как клонировать объект, если true, то он получит элемент со всеми классами и дочерними элементами, если false, то только тег, вот пример.
1 2 3 4 5 6 7 8 9 | // Берём элемент p let p = document.querySelector("p.red"); // Клонируем элемент p let newP = p.cloneNode(); // Клонируем весь элемент p let newPRed = p.cloneNode(true); document.body.append(newP); document.body.append(newPRed); |
Вот результат кода.
Как вы видите, тот только две надписи, а всё потому что, когда мы клонируем первый объект, не обозначаем что нужно весь его с клонировать, в итоге, он клонирует только тег с классом, но без текста.
Вывод:
В этой части учебника, вы узнали, как происходит работа с DOM в JavaScript, тут было показана всё самое важно, что нужно знать.
Подписываетесь на соц-сети:
Оценка:
Загрузка...