Первый вопрос: что такое атрибут и что такое свойство?
attributeмы вhtmlПары ключ-значение часто встречаются в коде, например:
<input id="the-input" type="text" value="Name:" />
Входной узел в приведенном выше коде имеет три атрибута:
- id : the-input
- type : text
- value : Name:
propertyполе Object узла DOM, соответствующее атрибуту, например:
HTMLInputElement.id === 'the-input'
HTMLInputElement.type === 'text'
HTMLInputElement.value === 'Name:'
Второй вопрос:
Из приведенного выше примера кажется, что атрибут и свойство — это одно и то же, так в чем же между ними разница?
Давайте посмотрим на другой кусок кода:
<input id="the-input" type="typo" value="Name:" /> // 在页面加载后,
我们在这个input中输入 "Jack"
Обратите внимание на атрибут type в этом коде, значение, которое мы даем, равноtypo, который не является одним из типов, поддерживаемых входными данными.
Давайте посмотрим на атрибуты и свойства входного узла выше:
// attribute still remains the original value
input.getAttribute('id') // the-input
input.getAttribute('type') // typo
input.getAttribute('value') // Name:
// property is a different story
input.id // the-input
input.type // text
input.value // Jack
Как видите, в атрибуте значение остается значением в html-коде, а в свойстве тип автоматически корректируется наtext, и когда пользователь изменяет ввод ввода, значение также изменяется наJack
В этом разница между атрибутом и свойством:
Атрибут всегда сохраняет исходное значение в html-коде, а свойство может меняться.
На самом деле, мы также можем увидеть некоторые подсказки из названий этих двух слов:
attributeСемантически предпочитаю неизменяемый
а такжеpropertyСемантически предпочитает быть изменчивым в течение своей жизни
Можно ли настроить атрибут или свойство?
Вывод первый:атрибут может свойство не работает
Мы можем попробовать настроить атрибут в html:
<input value="customInput" customeAttr="custome attribute value" />
Затем мы пытаемся получить пользовательские свойства:
input.getAttribute('customAttr') // custome attribute value
input.customAttr // undefined
Как видите, мы можем успешно получить настраиваемый атрибут, но не можем получить свойство.
На самом деле нетрудно понять, что при инициализации узла DOM онспецификация htmlАтрибуты, определенные в атрибуте, присваиваются свойству, а пользовательский атрибут не относится к этой атмосфере, и естественно сгенерированный DOM-узел не имеет этого свойства.
некоторые дополнения
Следует отметить, что существуют некоторые специальные атрибуты, соответствующие имена свойств которых будут изменены, например:
- for (attr) => htmlFor (prop)
- class (attr) => className (prop)
(Если мы проследим исходный код DOM, мы сможем составить список: какие имена атрибутов каким свойствам соответствуют, если интересно, можете попробовать)
В stackoverflow есть несколько интересных дискуссий о разнице между атрибутами и свойствами:
стек overflow.com/ah/6377829/5…
Некоторые из них думают, что значение атрибута означает defaultValue, а свойство узла DOM — другое дело, например: check(attr) соответствует defaultChecked(prop), value(attr) соответствует defaultValue(prop)
Что касается ограничений нашего значения в атрибутах (таких как допустимые значения для типа ввода), вы можете обратиться к этой ссылке:
Хотите узнать больше о D3.js и визуализации данных?
вот мойD3.js,визуализация данныхАдрес гитхаба, добро пожаловать на звездочку и форк :tada:
Если вы считаете, что эта статья хороша, вы можете щелкнуть ссылку ниже, чтобы обратить внимание :)
Хотите связаться со мной напрямую?
Электронная почта: ssthouse@163.com
WeChat: