Front-end-Job-Interview-Questions
Ответы на вопросы на должность Frontend разработчика.
Project maintained by FedorovAlexander Hosted on GitHub Pages — Theme by mattgraham
В чём разница между «атрибутом» (attribute) и «свойством« (property)?
Атрибуты определены в разметке HTML, а свойства определены в DOM. Большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов. Но они не идентичны.
Атрибуты
- Всегда являются строками.
- Их имя нечувствительно к регистру.
- Видны в innerHTML.
Свойства
- Могут иметь любое значение.
- Названия свойств чувствительны к регистру.
- Работают за счёт того, что DOM-узлы являются объектами JS.
Атрибуты и свойства
Когда браузер загружает страницу, он «читает» (также говорят: «парсит») HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.
Например, для такого тега у DOM-объекта будет такое свойство body.id=»page» .
Но преобразование атрибута в свойство происходит не один-в-один! В этой главе мы уделим внимание различию этих двух понятий, чтобы посмотреть, как работать с ними, когда они одинаковые и когда разные.
DOM-свойства
Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.
DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.
Например, создадим новое свойство для document.body :
document.body.myData = < name: 'Caesar', title: 'Imperator' >; alert(document.body.myData.title); // Imperator
Мы можем добавить и метод:
document.body.sayTagName = function() < alert(this.tagName); >; document.body.sayTagName(); // BODY (значением "this" в этом методе будет document.body)
Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:
Element.prototype.sayHi = function() < alert(`Hello, I'm $`); >; document.documentElement.sayHi(); // Hello, I'm HTML document.body.sayHi(); // Hello, I'm BODY
Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:
- Им можно присвоить любое значение.
- Они регистрозависимы (нужно писать elem.nodeType , не elem.NoDeTyPe ).
HTML-атрибуты
В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.
Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.
Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.
Мы можем увидеть это на примере ниже:
Таким образом, для нестандартных атрибутов не будет соответствующих DOM-свойств. Есть ли способ получить такие атрибуты?
Конечно. Все атрибуты доступны с помощью следующих методов:
- elem.hasAttribute(name) – проверяет наличие атрибута.
- elem.getAttribute(name) – получает значение атрибута.
- elem.setAttribute(name, value) – устанавливает значение атрибута.
- elem.removeAttribute(name) – удаляет атрибут.
Эти методы работают именно с тем, что написано в HTML.
Кроме этого, получить все атрибуты элемента можно с помощью свойства elem.attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value .
Вот демонстрация чтения нестандартного свойства:
У HTML-атрибутов есть следующие особенности:
- Их имена регистронезависимы ( id то же самое, что и ID ).
- Их значения всегда являются строками.
Расширенная демонстрация работы с атрибутами:
Пожалуйста, обратите внимание:
- getAttribute(‘About’) – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
- Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение «123» .
- Все атрибуты, в том числе те, которые мы установили, видны в outerHTML .
- Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value .
Синхронизация между атрибутами и свойствами
Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).
В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:
Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:
- Изменение атрибута value обновило свойство.
- Но изменение свойства не повлияло на атрибут.
Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value , и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.
DOM-свойства типизированы
DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:
checkbox
Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:
Hello
Хотя большинство свойств, всё же, строки.
При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash .
link
Если же нужно значение href или любого другого атрибута в точности, как оно записано в HTML, можно воспользоваться getAttribute .
Нестандартные атрибуты, dataset
При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.
Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.
Также они могут быть использованы, чтобы стилизовать элементы.
Например, здесь для состояния заказа используется атрибут order-state :
/* стили зависят от пользовательского атрибута "order-state" */ .order[order-state="new"] < color: green; >.order[order-state="pending"] < color: blue; >.order[order-state="canceled"] A new order. A pending order. A canceled order.
Почему атрибут может быть предпочтительнее таких классов, как .order-state-new , .order-state-pending , order-state-canceled ?
Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:
// немного проще, чем удаление старого/добавление нового класса div.setAttribute('order-state', 'canceled');
Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.
Чтобы избежать конфликтов, существуют атрибуты вида data-*.
Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset .
Например, если у elem есть атрибут «data-about» , то обратиться к нему можно как elem.dataset.about .
Атрибуты, состоящие из нескольких слов, к примеру data-order-state , становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState .
Вот переписанный пример «состояния заказа»:
.order[data-order-state="new"] < color: green; >.order[data-order-state="pending"] < color: blue; >.order[data-order-state="canceled"] A new order.
Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.
Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.
Итого
- Атрибуты – это то, что написано в 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, а нам может понадобиться получить «оригинальное» значение.
Задачи
Получите атрибут
важность: 5
Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.
Choose the genre
Атрибут и свойство объекта. В чем разница?
Кто может пояснить (или направить в нужном направлении), чем атрибут объекта отличается от свойства объекта? Существуют ли точные определения?
Отслеживать
1 1 1 золотой знак 1 1 серебряный знак 7 7 бронзовых знаков
задан 13 окт 2014 в 19:38
35 1 1 серебряный знак 4 4 бронзовых знака
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Атрибуты – это материально-ощутимые, сопутствующие объекту, элементы, а свойства – его характеристики, абстрактные черты, признаки. По сути, атрибут – объективное явление, а свойство – субъективное. Атрибут — это предмет, знак, а свойство — признак, то есть то, что при знаке, то, что присуще данному знаку. Атрибут — это предметное сопровождение свойства, его материальное проявление.
Отслеживать
ответ дан 13 окт 2014 в 20:55
3,221 8 8 золотых знаков 36 36 серебряных знаков 53 53 бронзовых знака
Спасибо. Звучит вполне логично. То есть можно рассматривать атрибут как средство выражения конкретного свойства (или конкретных значений параметров). Допустим, если взять некую абстрактную систему. Определенные значения параметров определяют конкретные свойства объекта и выражаются посредством атрибута (атрибутов).
14 окт 2014 в 3:04
Да, это будет верно. Как заметила Алёнка, атрибут — это своего рода проводник свойств.
14 окт 2014 в 8:44
Атрибут — изменяемое значение конкретно указывающее на объект. Свойство — значение описывающее объект, но присущее любому колличеству объектов.
Одно свойство может подходить и одному и другому объекту и служит для описания объекта. Атрибут же явный указатель объекта.
Есть люди. Они делятся на взрослых, детей и стариков. На белых, чёрных, жёлтых и так далее.
Так вот «палец», «мозг», это свойства описывающие некий объект. Только вот палец и мозг есть и у людей и у обезьян.
А если мы скажем «Рука» или «Одежда», это уже будет атрибут. Потому когда мы говорим «Рука», мы имеем ввиду человеческую руку, но не ЛАПУ животного. Ровно как и одежду носят люди, но не носят животные.
Свойство, прошу прощения за тафтологию, может быть свойственно многим объектам, атрибут же — явный селектор. Указатель на объект.
Отслеживать
ответ дан 8 июн 2016 в 22:27
11 1 1 бронзовый знак
Заглянем в Википедию.
Атрибут — в философии — необходимое, существенное, неотъемлемое свойство предмета или явления (в отличие от преходящих, случайных его состояний).
Так что атрибут – это и есть свойство.
Но в той же Википедии:
Атрибут — в мифологии и иконографии предмет, служащий постоянным устойчивым знаком и отличительным признаком мифологического или реального персонажа или аллегорической персонификации какого-либо понятия (молнии Зевса, весы и повязка Фемиды).
Так что атрибут может быть и предметом, но предмет в религии является символом, проводником к какой-то Сущности, за ним всегда стоит гораздо больше, чем он изображает.
Поэтому (заглянем в dic. academic) «Атрибут подразумевает необходимое отношение к некоторой субстанции, но он сам не может быть субстанцией или существовать без нее».
В чем разница между prop и attr?
Собственно вот и вся разница: первый метод читает/устанавливает значение атрибута элемента (Мержевич по теме), а второй — свойство объекта представляющего элемент. Если вкратце, то разница в том, что они из разной среды: атрибут это термин HTML — вы устанавливаете его в разметке и значение атрибута как-то обрабатывается, влияя на какие-то свойства элемента. А свойства это значения относящиеся непосредственно к DOM объекту элемента.
Например, class, один из самых привычных атрибутов для тега, в элементе представлен свойством className. Если у тега нет атрибута class, то у самого элемента есть свойство className, которое содержит пустую строку. Ну и соотвественно задать класс элементу можно либо изменив атрибут class с помощью attr, либо изменив свойство className с помощью prop.