Цель этого сообщения в блоге - устранить некоторую путаницу при использовании атрибута data в Javascript. Когда я изучаю программную инженерию, иногда мир учебного лагеря и реальный мир кажутся тесно связанными, но при этом отделенными друг от друга галактиками. Во время одной из наших лекций мы изменяли классы и добавляли идентификаторы непосредственно в html, и один студент упомянул, что было бы не очень разумно изменять этот материал, потому что у команды дизайнеров могут быть проблемы.
Это имело смысл. Введите HTMLElement.dataset. Свойство набора данных предоставляет программистам JS возможность читать / записывать настраиваемые атрибуты элемента. Преимущество в том, что он доступен как в DOM, так и в HTML.
Непонятная часть этого заключается в том, что атрибут данных HTML и соответствующий ему набор данных DOM.property не имеют одного и того же имени. Вот что я обнаружил, читая на сайте MDN.
Именно здесь и возникает большинство проблем. Как новый программист на JS, я подумал, что это особенно полезно для установки атрибутов элементов при добавлении слушателей событий. Предупреждение: я все еще студент, и это, возможно, не лучшая практика, но, по крайней мере, я не собирался изменять существующий HTML.
Итак, после прочтения правил именования для этого предмета, мы можем перейти к полезным вещам, доступу и установке значений, а также к некоторым примерам.
На мой взгляд, доступ к значениям дает нам больше возможностей для манипуляции, чем простой вызов className или id. Это мощно, потому что нам не нужно беспокоиться о том, придет ли команда дизайнеров в один прекрасный день и скажет, угадайте, что, мы переименовали все наши классы. Вот несколько примеров синтаксиса:
Вот пример, который дает Mozilla:
И для моих товарищей по когорте «товарищей». Этот действительно должен попасть в цель. Вот как мы с Алексом использовали нашу страну игрушек для парного программирования:
Поговорив с другом, который сейчас изучает React, мы выясним, если вы читаете этот код, что .innerText - это метод IE, и мы должны использовать .textContent, но это уже для другого поста.
Из-за того количества времени, которое мы тратим на изучение нового материала, иногда важные аспекты ускользают от нас. Я считаю, что когда наступит неделя проекта, мы все станем намного лучше в использовании этих настраиваемых инструментов для управления DOM и написания чистого кода. Надеюсь, вам понравилось чтение!
