- Главная
- Информатика
- Занятие 5 (часть 2)
Содержание
- 2. Манипуляции над DOM Ранее мы разобрались с тем, как искать элементы и перемещаться по HTML-документу. Сегодня
- 3. Создание узлов Начнём, пожалуй, с самого интересного. У объекта document есть встроенный метод createElement(tagName, ?options), который
- 4. Вставка узлов в документ Как правило, мы создаём новые узлы и элементы, чтобы позже вставить их
- 5. Пример вставки узлов в документ
- 6. Результат запуска кода из предыдущего примера
- 7. Вставка фрагментов HTML Мы рассмотрели, как мы можем вставлять узлы и обычные строки в наш документ,
- 8. Ещё методы для вставки HTML, элементов и текста Кроме свойства element.innerHTML, элементы имеют метод element.insertAdjacentHTML(where, html),
- 9. Удаление узлов Удаление узлов происходит очень просто. Для этого лучше всего воспользоваться методом node.remove(), мы его
- 10. Клонирование узлов Создать клон узла очень просто. Нужно просто воспользоваться встроенным методом node.cloneNode(?deep). Данный метод принимает
- 11. Устаревшее До прихода современных методов вставки, удаления и замены узлов таких как: append, before, replaceWith и
- 12. Работа с отображением элементов Довольно часто в рамках разработки приложений нам, основываясь на каком-то состоянии, нужно
- 13. Работа с атрибутами элементов Для работы с атрибутами интерфейс Element предоставляет нам целый ряд встроенных методов:
- 14. Работа с классами элементов Для работы с классами интерфейс Element предоставляет нам целых два встроенных свойства:
- 15. Работа со стилями элементов Любому HTML-элементу можно добавить атрибут style. Получить значение этого атрибута можно как
- 16. Задание сразу нескольких стилей Задать элементу сразу несколько стилей можно с помощью специального свойства element.style.cssText. Данное
- 18. Скачать презентацию
Манипуляции над DOM
Ранее мы разобрались с тем, как искать элементы и
Манипуляции над DOM
Ранее мы разобрались с тем, как искать элементы и
Помимо изменения уже существующей структуры HTML-документа мы также можем добавлять динамически созданные элементы. При этом до момента непосредственного “вживления” элемента в DOM-дерево мы можем добавить в него какое-то содержимое, задать значения его атрибутам и даже стили. Делается всё это, конечно же, с помощью встроенных методов и свойств самих узлов или объекта document (частный случай Node).
Важно отметить, что процедуры изменения структуры DOM являются довольно трудоёмкими. Поэтому стоит всегда стремиться к минимизации операций такого рода, а в случаях, когда производительность в приложении критична, не бояться пользоваться дополнительными способами оптимизации.
Создание узлов
Начнём, пожалуй, с самого интересного. У объекта document есть встроенный
Создание узлов
Начнём, пожалуй, с самого интересного. У объекта document есть встроенный
Например:
На примере выше мы создали блочный элемент и элемент неупорядоченного списка. При вставке в документ они будут иметь вид и
(1) Второй аргумент options в методе createElement содержит всего одно поле is и нужен только в случаях использования пользовательских веб-компонентов.
Вставка узлов в документ
Как правило, мы создаём новые узлы и элементы,
Вставка узлов в документ
Как правило, мы создаём новые узлы и элементы,
node.append(…nodes или strings) - вставляет переданные узлы/строки после всех дочерних узлов node;
node.prepend(…nodes или strings) - вставляет переданные узлы/строки перед всеми дочерними узлами node;
node.before(…nodes или strings) - вставляет переданные узлы/строки прямо перед узлом node;
node.after(…nodes или strings) - вставляет переданные узлы/строки сразу после узла node;
node.replaceWith(…nodes или strings) - вставляет переданные узлы/строки вместо узла node.
Рассмотрим их работу на примере.
Пример вставки узлов в документ
Пример вставки узлов в документ
Результат запуска кода из предыдущего примера
Результат запуска кода из предыдущего примера
Вставка фрагментов HTML
Мы рассмотрели, как мы можем вставлять узлы и обычные
Вставка фрагментов HTML
Мы рассмотрели, как мы можем вставлять узлы и обычные
‘
Unexpected!
’“Сломает” ли это структуру нашего документа? Появится ли из-за этого новый HTML-элемент? Нет. И нет. Методы, описанные ранее, вставляют строки в DOM безопасным способом. Это нужно, чтобы оградить документ от вмешательства в его структуру. Также безопасно можно вставить или изменить текст в документе с помощью свойства node.textContent. Однако тут стоит помнить, что новое значение для данного свойства заменит собой весь существовавший до этого контент узла.
Когда вам всё же необходимо вставить фрагмент HTML, самым простым способом будет использовать свойство element.innerHTML. При изменении этого свойства, строка, переданная в качестве нового значения, прежде чем заменить собой предыдущий контент элемента, преобразуется к HTML. Однако пользоваться этим свойством нужно аккуратно и всегда проверять, что идёт на вход, чтобы предотвратить XSS атаки. Проверять можно как вручную (что не всегда лучший вариант, т.к. можно что-то упустить), так и воспользоваться каким-нибудь готовым решением.
Ещё методы для вставки HTML, элементов и текста
Кроме свойства element.innerHTML, элементы
Ещё методы для вставки HTML, элементов и текста
Кроме свойства element.innerHTML, элементы
“beforebegin" — вставить HTML-код перед элементом (похож на node.before);
“afterbegin” — вставить HTML-код перед дочерними узлами элемента (похож на node.prepend);
“beforeend” — вставить HTML-код после дочерних узлов элемента (похож на node.append);
“afterend” — вставить HTML-код после элемента (похож на node.after).
Кроме этого существуют ещё два очень похожих на метода:
element.insertAdjacentText(where, text) – безопасно вставить текст по расположению where;
element.insertAdjacentElement(where, element) – вставить элемент по расположению where.
Однако используются они крайне редко.
Удаление узлов
Удаление узлов происходит очень просто. Для этого лучше всего воспользоваться
Удаление узлов
Удаление узлов происходит очень просто. Для этого лучше всего воспользоваться
Кроме явного удаления узлов можно прибегнуть и к другим способам. Как говорилось ранее, при изменении значений свойств node.textContent и element.innerHTML старое содержимое узла перезаписывается новым. Таким образом также происходит удаление узлов.
Клонирование узлов
Создать клон узла очень просто. Нужно просто воспользоваться встроенным методом
Клонирование узлов
Создать клон узла очень просто. Нужно просто воспользоваться встроенным методом
Во время перемещения узлов они не клонируются, а перемещаются сами. То есть фактически элементы при попытке добавления их в разные части документа каждый раз “перетаскиваются” с одного места на другое. Чтобы сделать несколько одинаковых элементов их каждый раз нужно клонировать или создавать заново. Например:
После выполнения кода из примера элемент будет содержать всего один элемент внутри себя.
Устаревшее
До прихода современных методов вставки, удаления и замены узлов таких как:
Устаревшее
До прихода современных методов вставки, удаления и замены узлов таких как:
node.appendChild(newNode) – вставляет newNode после всех дочерних узлов узла node;
node.removeChild(nodeToRemove) – удаляет nodeToRemove из дочерних узлов node;
node.insertBefore(newNode, nextSibling) – вставляет newNode перед nextSibling внутри узла node;
node.replaceChild(newNode, oldChildNode) – заменяет oldChildNode на newNode среди дочерних узлов node.
Можно заметить, что раньше для вставки, замены и даже удаления элементов приходилось всегда производить операцию через родительский элемент.
** Все вышеперечисленные методы, в отличие от их современных аналогов, возвращают вставленный/удалённый узел.
Кроме этих методов существует ещё один более «древний» – document.write(html). Сегодня у него почти не осталось применения, да и в целом использовать его также не рекомендуется. Данный метод заменяет содержимое страницы html-фрагментом, переданным в качестве параметра.
Работа с отображением элементов
Довольно часто в рамках разработки приложений нам, основываясь
Работа с отображением элементов
Довольно часто в рамках разработки приложений нам, основываясь
Изменить внешний вид элемента с помощью JavaScript можно тремя основными способами:
Изменить атрибуты элемента;
Изменить набор классов элемента;
Изменить стили элемента.
Очень важное замечание!
В ситуациях, когда стоит вопрос изменить внешний вид элемента средствами JavaScript или CSS, всегда отдавайте предпочтение именно CSS! Используйте JavaScript только тогда, когда возможностей CSS в вашем случае недостаточно.
Работа с атрибутами элементов
Для работы с атрибутами интерфейс Element предоставляет нам
Работа с атрибутами элементов
Для работы с атрибутами интерфейс Element предоставляет нам
element.hasAttribute(attrName) — проверяет, есть ли у элемента атрибут с таким именем;
element.getAttribute(attrName) — получает значение атрибута элемента;
element.setAttribute(attrName, value) — устанавливает значение атрибута;
element.removeAttribute(attrName) — удаляет атрибут элемента.
Кроме этого есть свойство element.attributes, которое возвращает весь список атрибутов элементов в виде коллекции (перебираемого псевдомассива). У каждого атрибута из этой коллекции можно получить имя (поле name) и значение (поле value).
В большинстве случаев напрямую с атрибутами работать не приходится. Самые распространённые случаи работы с ними следующие: изменение состояние поля для ввода на disabled или readonly, отображение состояния checked в чекбоксах и т.п.
Работа с классами элементов
Для работы с классами интерфейс Element предоставляет нам
Работа с классами элементов
Для работы с классами интерфейс Element предоставляет нам
element.classList.add(‘class’) — добавить класс с названием class элементу element;
element.classList.remove(‘class’) — удалить класс элемента element с названием class;
element.classList.toggle(‘class’) — если класс с названием class у элемента element уже есть то удалить его, если нет — добавить;
element.classList.contains(‘class’) — определить, есть ли класс с названием class у элемента element.
Работа со стилями элементов
Любому HTML-элементу можно добавить атрибут style. Получить значение этого
Работа со стилями элементов
Любому HTML-элементу можно добавить атрибут style. Получить значение этого
Для очищения какого-то из ранее записанных в объект style стилей понадобится присвоить ему пустую строку или значение null. Иначе свойство попросту не удалится.
(1) Обратите внимание, что CSS-свойства, ожидающие значения с размерностями, не будут работать в случае передачи обычного числа или строки, содержащей число без размерности.
Задание сразу нескольких стилей
Задать элементу сразу несколько стилей можно с помощью
Задание сразу нескольких стилей
Задать элементу сразу несколько стилей можно с помощью