Привет, дорогой подписчик!

Мы молодая команда JS разработчиков, которая решила открыть несколько каналов в Telegram, посвященных JavaScript и frontend-разработке в целом.

Подписывайся на другие наши проекты:

JavaScript тесты - канал с тестами и задачами по JS. Здесь ты сможешь практиковаться и обсуждать свои решения с другими подписчиками и админами. Каждый день тебя будет ждать новый интересный вызов в виде очередной викторины.

JavaScript инструменты - канал с инструментами по JS. Здесь каждый день публикуются современные технологии призванные упростить разработку на JavaScript.

Полезная вËрстка - канал с готовым кодом интересных решений различных повседневных задач: слайдеры, навигации, различная анимация и многое другое.

Развивайся с нами, ведь так проще!

Тимлид по секрету показал мне свои закладки

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

Подпишись на канал и посмотри 👇

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

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

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

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

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

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

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

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

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

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

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

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

Но есть и исключения, например, 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-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

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

Итого по атрибутам и свойствам

Атрибуты – это то, что написано в HTML.
Свойства – это то, что находится в DOM-объектах.

Методы для работы с атрибутами:
elem.hasAttribute(name) – проверить на наличие.
elem.getAttribute(name) – получить значение.
elem.setAttribute(name, value) – установить значение.
elem.removeAttribute(name) – удалить атрибут.
elem.attributes – это коллекция всех атрибутов.

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

- Нужен нестандартный атрибут. Но если он начинается с data-, тогда нужно использовать dataset.
- Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.

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

Изменение документа

Добро пожаловать в новую главу на нашем канале "Изменение документа".

Модификации DOM – это ключ к созданию «живых» страниц.

Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.

P.S. Найти все посты по этой главе вы можете с помощью комбинации хештегов, которые указаны ниже.

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

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

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

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

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

Хочешь знать основные языки программирования?

Подписывайся на канал Simple code.

Там тебя ждут ежедневные посты по разным языкам: JavaScript, C#, C++, Python, Java.

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

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

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

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

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

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

Ты знаешь сколько получает Middle Python разработчик в России?
От 120 000 рублей!

Подписывайся на канал Python заметки и стань мидлом за считанные недели абсолютно бесплатно!

Эксклюзивный и актуальный материал, а также тесты по современному Python каждый день.

Расширяй свои знания с нами!

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

В нашем случае сообщение – это 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), тогда клон будет без дочерних элементов.

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