Этот курс продолжает обучение тех, кто уже изучил основы JavaScript. На очереди не самые простые вещи: прототипы, конструкторы, асинхронный код, Node.js и DOM. По окончании обучения вы будете уметь программировать на JavaScript. Авторы курса — разработчики из Яндекса.
Атрибуты и свойства
Loading...
From the course by Moscow Institute of Physics and Technology
JavaScript, часть 2: прототипы и асинхронность
30 ratings
Moscow Institute of Physics and Technology
30 ratings
Course 4 of 5 in the Specialization Разработка интерфейсов: вёрстка и JavaScript
From the lesson
DOM
Meet the Instructors
Конев Антонразработчик интерфейсов, Яндекс
Сергей Жигаловразработчик интерфейсов, Яндекс
Чистяков Денисруководитель службы разработки, Яндекс
Все элементы в DOM-дереве могут обладать атрибутами или свойствами, и и те,
и другие могут быть совершенно разными: они могут обозначать геометрию объекта,
его высоту, ширину и любые другие его параметры: классы,
которые с ним связаны, его метаописания.
И для работы со всеми ними разработаны методы,
которые позволяют получить к ним доступ.
И первый набор методов, которые мы рассмотрим для работы
с атрибутами — это так называемые star attribute.
Мы получаем наш элемент формы с помощью getElementById, и впоследствии,
когда вы будете видеть переменную form — это всегда наш элемент формы.
И вызываем у нее метод getAttribute.
В качестве параметра он получает имя атрибута,
который мы хотим, к которому мы хотим обратиться,
а в качестве возвращаемого значения в виде строки — содержимое этого атрибута.
И таким образом мы получаем значение атрибута action.
Также есть метод hasAttribute,
который проверяет наличие атрибута, и мы проверяем,
есть ли у формы атрибут method, и получаем false, так как его нету.
Метод setAttribute, который устанавливает значение атрибута,
и мы устанавливаем значение method в POST,
и он принимает имя атрибута и его значение.
При повторном вызове метод has уже вернет нам true,
так как новый атрибут уже был добавлен в DOM-дерево.
Метод remove для удаления атрибута по его имени,
и снова вызываем метод has и видим, что атрибут был успешно удален.
Наряду со множеством атрибутов, описанных в спецификации по html,
разработчики спецификации подумали о том, что этих атрибутов может быть недостаточно
и люди захотят записывать внутри html-элементов какое-то
метаописание и какие-то параметры, какие-то значения, какие-то статусы,
возможно, и для этого нужны будут специальные атрибуты.
И так были разработаны так называемые data-атрибуты.
Это атрибуты, которые начинаются с префикса data-,
а далее следует название атрибута в виде латинских букв, цифр и знаков дефиса.
И с помощью них можно записывать совершенно произвольные
значения под совершенно произвольным именем.
Но разработчики пошли дальше.
Они подумали: «Вот есть data-атрибуты,
у них есть вполне конкретное специальное предназначение.
К ним, безусловно, можно обращаться, как к обычным атрибутам с помощью getAttribute,
передав их полное название в качестве параметра.
Но это будет достаточно долго, неудобно, и давайте придумаем что-нибудь попроще».
И разработчики сделали специальный объект dataset,
который есть внутри любого DOM-элемента,
который содержит значения всех data-атрибутов,
которые есть внутри этого элемента.
И они подумали: «data-атрибуты имеют вполне конкретное название,
они начинаются с префикса data-.
Давайте сделаем обращение к ним максимально простым».
Поэтому они преобразовывают имя атрибута,
убирают от него префикс data-, а все дефисы и последующие
буквы преобразуют к верхнему регистру, так называемому CamelCase.
Таким образом имя атрибута становится валидным идентификатором
для переменной в JavaScript, и мы можем обращаться к нему без одинарных
или двойных кавычек, через так называемую дот-нотацию.
И мы можем с помощью этого как обратиться к атрибуту
на чтение, так и установить новое значение атрибута,
которые будет прописано в DOM-дерево уже в развернутом data- виде.
У всех элементов есть как атрибуты, так и свойства.
И порой это совершенно разные вещи.
Например, у элемента формы в нашем случае есть атрибут action,
нет атрибута method, и его значение используется по умолчанию,
и есть параметр атрибут id.
Также у этого DOM-элемента есть свойства.
Есть свойство action, которое указывает на то, куда будет отправлен наш запрос.
Есть свойство method, и оно принимает значение get,
так как это значение по умолчанию, несмотря на то,
что в нашей html-форме не указан метод для ее отправки.
И есть свойство id.
Слава Богу, id в этом месте равно значение атрибута
id и указывает то же самое строковое значение.
Порой атрибуты и свойства ведут себя очень непредсказуемо,
и значения у них могут сильно отличаться.
Поэтому я бы настоятельно рекомендовал использовать атрибуты в большинстве
случаев вместо свойств, а если вы хотите пользоваться свойствами,
то использовать самые простые и общие свойства,
такие как id и className, которые всегда ведут себя предсказуемо.
Атрибут class — это, пожалуй,
один из самых широко используемых атрибутов в html.
С помощью него вы можете помечать элементы для того,
чтобы наложить на них css-свойства и настроить их визуальное отображение,
для того чтобы выбрать их с помощью селектора,
и вообще объединить в какие-то логически связанные группы.
Пометить несколько элементов, которые для вас важны,
какими-то своеобразными метками, а потом с ними работать.
Для работы с атрибутом class есть свойство className,
которое в строковом представлении содержит значение атрибута class в
html и представляет весь набор классов,
который указан у этого html-элемента в виде строки.
Но пользоваться им не очень удобно.
Для того чтобы отредактировать набор классов: убрать класс,
добавить класс, вам необходимо устанавливать это свойство
и заменять строчку уже существующую на новую с помощью конкатенации,
с помощью регулярных выражений или с помощью замены внутри строки.
Это усложняет и поиск, и выборку, и проверку наличия класса.
Поэтому разработчики создали новый, достаточно современный метод classList,
который содержит набор методов для работы с классами.
Прежде всего, это метод add, который добавляет класс к списку уже существующих,
метод item, который получает класс по его
индексу и по порядковому расположению его в html-элементе,
метод contains, который позволяет вам по имени
класса проверить, есть ли он внутри этого элемента, и метод remove,
который позволяет вам удалить класс из html-элемента.
Explore our Catalog
Join for free and get personalized recommendations, updates and offers.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
