Прекрати мечтать и стань мидлом за 50 дней

Опытные Frontend-разработчики создали бесплатный канал, в котором регулярно выходят топовые видеоуроки и курсы для начинающих.

Хватит тратить время на поиск годного контента, просто подпишись на Войти в IT, остальное мы сделаем за тебя.

Расширенная демонстрация работы с атрибутами

Пожалуйста, обратите внимание:

1. getAttribute('About') – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.

2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение "123".

3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML.

4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value.

#браузер #документ #атрибуты_свойств

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере выше id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону.

#браузер #документ #атрибуты_свойств

Вам нравится читать контент на этом канале?

Возможно, вы задумывались о том, чтобы купить на нем рекламу?

Следуйте 3 простым шагам, чтобы сделать это:

1) Регистрируйтесь по ссылке: https://telega.in/c/notesjs
2) Пополняйтесь удобным способом
3) Размещайте рекламное сообщение

Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.

Исключения синхронизации

Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную.

В примере выше:
- Изменение атрибута value обновило свойство.
- Но изменение свойства не повлияло на атрибут.

Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value, и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.

#браузер #документ #атрибуты_свойств

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип.

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом.

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash.

#браузер #документ #свойства_узлов

Нестандартные атрибуты, dataset

При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

#браузер #документ #атрибуты_свойств

Атрибуты для стилизации элементов

Например, здесь для состояния заказа используется атрибут order-state (см. картинку выше).

Почему атрибут может быть предпочтительнее таких классов, как .order-state-new, .order-state-pending, order-state-canceled?

Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто.

#браузер #документ #атрибуты_свойств

"Зарезервированные" атрибуты (dataset)

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset.

Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about.

Атрибуты, состоящие из нескольких слов, к примеру data-order-state, становятся свойствами, записанными с помощью верблюжьей нотации (CamelCase): dataset.orderState.

См. переписанный пример «состояния заказа» на картинке выше.

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

#браузер #документ #атрибуты_свойств

Пример: показать сообщение

Рассмотрим методы изменения документа на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert.

Это был пример HTML. Далее мы будем создавать такой же div, используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

#браузер #документ #изменение

Создание элемента

DOM-узел можно создать двумя методами:

document.createElement(tag) - создаёт новый элемент с заданным тегом.

document.createTextNode(text) - создаёт новый текстовый узел с заданным текстом.

Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения.

#браузер #документ #изменение

Создание сообщения

В нашем случае сообщение – это div с классом alert и HTML в нём.

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

#браузер #документ #изменение

Методы вставки, append

Чтобы наш div появился, нам нужно вставить его где-нибудь в document. Например, в document.body.

Для этого есть метод append, в нашем случае: document.body.append(div).

#браузер #документ #изменение

Методы вставки

Вот методы для различных вариантов вставки:

node.append(...nodes or strings) – добавляет узлы или строки в конец node,

node.prepend(...nodes or strings) – вставляет узлы или строки в начало node,

node.before(...nodes or strings) – вставляет узлы или строки до node,

node.after(...nodes or strings) – вставляет узлы или строки после node,

node.replaceWith(...nodes or strings) – заменяет node заданными узлами или строками.

#браузер #документ #изменение

insertAdjacentHTML/Text/Element

С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html).

Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:
"beforebegin" – вставить html непосредственно перед elem,
"afterbegin" – вставить html в начало elem,
"beforeend" – вставить html в конец elem,
"afterend" – вставить html непосредственно после elem.

Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».

#браузер #документ #изменение

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

Для удаления узла есть методы node.remove().
Например, сделаем так, чтобы наше сообщение удалялось через секунду.

Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.

Все методы вставки автоматически удаляют узлы со старых мест.

#браузер #документ #изменение

Клонирование узлов: cloneNode

Как вставить ещё одно подобное сообщение?

Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).

Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.

Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false), тогда клон будет без дочерних элементов.

#браузер #документ #изменение

DocumentFragment

DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.

Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.

Например, getListContent ниже генерирует фрагмент с элементами <li>, которые позже вставляются в <ul>

#браузер #документ #изменение

Устаревшие методы вставки/удаления

Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.

Сейчас уже нет причин их использовать, так как современные методы append, prepend, before, after, remove, replaceWith более гибкие и удобные.

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

parentElem.appendChild(node)
parentElem.insertBefore(node, nextSibling)
parentElem.replaceChild(node, oldChild)
parentElem.removeChild(node)

#браузер #документ #изменение

Несколько слов о «document.write»

Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write.

Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.

Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.

В современных скриптах он редко встречается из-за следующего важного ограничения:

Вызов document.write работает только во время загрузки страницы.

#браузер #документ #изменение

Стили и классы

Как правило, существует два способа задания стилей для элемента:
1) Создать класс в CSS и использовать его: <div class="...">
2) Писать стили непосредственно в атрибуте style: <div style="...">.

JavaScript может менять и классы, и свойство style.

Классы – всегда предпочтительный вариант по сравнению со style. Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться».

Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript.

В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение.

#браузер #документ #стили_классы