{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Дата-атрибуты ("},{"type":"text","marks":[{"type":"code"}],"text":"data-*"},{"type":"text","marks":[{"type":"bold"}],"text":")"},{"type":"text","text":" — это специальные пользовательские атрибуты в HTML, которые позволяют "},{"type":"text","marks":[{"type":"bold"}],"text":"хранить собственные данные прямо внутри тегов"},{"type":"text","text":", чтобы потом использовать их в JavaScript."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Они не влияют на внешний вид страницы, но помогают "},{"type":"text","marks":[{"type":"bold"}],"text":"передавать дополнительную информацию"},{"type":"text","text":" элементам — например, ID товара, цену, статус и т.д."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 1. Синтаксис"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый дата-атрибут начинается с префикса "},{"type":"text","marks":[{"type":"code"}],"text":"data-"},{"type":"text","text":", а после дефиса идёт "},{"type":"text","marks":[{"type":"bold"}],"text":"любое имя"},{"type":"text","text":", выбранное разработчиком:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Профиль пользователя

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🟢 Здесь:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"data-user"},{"type":"text","text":" = "},{"type":"text","marks":[{"type":"code"}],"text":"\"Иван\""}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"data-age"},{"type":"text","text":" = "},{"type":"text","marks":[{"type":"code"}],"text":"\"25\""}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 2. Доступ к дата-атрибутам через JavaScript"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"JavaScript автоматически превращает дата-атрибуты в объект "},{"type":"text","marks":[{"type":"code"}],"text":"dataset"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Обращение к ним идёт по имени атрибута без префикса "},{"type":"text","marks":[{"type":"code"}],"text":"data-"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Пример:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🟢 Можно и изменять значения:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"button.dataset.color = \"blue\";\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 3. Для чего используются "},{"type":"text","marks":[{"type":"code"}],"text":"data-*"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Хранение вспомогательных данных"},{"type":"text","text":", которые не стоит выводить в HTML-тексте;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Передача информации в скрипты"},{"type":"text","text":", например ID товара, состояние кнопки, рейтинг, координаты и т.д.;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Упрощение интерактивности"},{"type":"text","text":" — можно легко связать HTML и JavaScript без лишних запросов к серверу."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Пример использования:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Наушники

\n"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"const item = document.querySelector(\"li\");\nconsole.log(item.dataset.price); // \"4999\"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 4. Правила именования"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Атрибут "},{"type":"text","marks":[{"type":"bold"}],"text":"обязательно должен начинаться с "},{"type":"text","marks":[{"type":"code"}],"text":"data-"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После дефиса можно писать латинские буквы, цифры и дефисы ("},{"type":"text","marks":[{"type":"code"}],"text":"data-user-id"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"data-item-name"},{"type":"text","text":")."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В JavaScript имена с дефисами преобразуются в "},{"type":"text","marks":[{"type":"bold"}],"text":"camelCase"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

\n"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"element.dataset.userId; // \"777\"\n"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💡 Итого:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Свойство"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Описание"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Формат"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"data-имя=\"значение\""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Где используется"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В любых HTML-тегах"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Доступ из JS"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Через "},{"type":"text","marks":[{"type":"code"}],"text":"element.dataset.имя"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Назначение"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Хранение пользовательских данных в разметке"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Влияет на отображение"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Нет"}]}]}]}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Простыми словами:"},{"type":"hardBreak"},{"type":"text","text":"Дата-атрибуты — это "},{"type":"text","marks":[{"type":"bold"}],"text":"скрытые “кармашки” данных"},{"type":"text","text":" внутри HTML-элементов."},{"type":"hardBreak"},{"type":"text","text":"Они нужны, чтобы "},{"type":"text","marks":[{"type":"bold"}],"text":"JavaScript мог понимать контекст элемента"},{"type":"text","text":", не загружая данные из других источников."}]}]}

Что делают дата-атрибуты и какая у них задача data-*?

Комментарии