Подробно объясните атрибуты HTML и свойства DOM.

JavaScript HTML

В большинстве статей атрибут обычно переводится как «свойство», а свойство переводится как «свойство».

В заключение

Сначала напишите заключение, если вы все поняли, вам не нужно его потом читать.

HTML attribute DOM property
значение всегда является строкой илиnull Значение может быть любым допустимым типом js.
без учета регистра Деликатный случай
вернуть, если он не существуетnull вернуть, если он не существуетundefined
дляhref, возвращает значение, заданное html дляhrefВозвращает проанализированный полный URL
возобновитьvalueНедвижимость обновляется возобновитьvalue, функция не обновляется

Обзор

Когда мы пишем HTML-код, мы пишем HTML дляэлементнастраиватьхарактеристика,Например:

<input id="name" value="justjavac" />

мы написалиinputlabel, и определить для него 2характеристика (idа такжеvalue). Когда браузер анализирует этот код, он анализирует исходный код html в объект DOM или точно так же, какHTMLInputElementобъект.HTMLInputElementНаследственные отношения это:

HTMLInputElement
  ↓
HTMLElement
  ↓
Element
  ↓
Node
  ↓
EventTarget
  ↓
Object

Изучив документацию, вы обнаружите, чтоHTMLInputElementПрототип многое определяет.Атрибутыи такие методы, какform, name, type, alt, checked, src, valueждать, и отHTMLElementунаследовалid, title, clientTopи т.п.

Если внимательно присмотреться, то нетрудно обнаружить, что у нас естьinputметка определенахарактеристика:idа такжеvalue.Когда браузер анализирует веб-страницу, он преобразует HTMLхарактеристикасопоставить с DOMАтрибуты.

а такжеElementв классе есть еще одинattributesproperties, которые содержат все свойства.

но,Атрибуты HTML и свойства DOM не всегда совпадают.

1. DOM-свойства

Когда браузер завершает синтаксический анализ HTML, полученный DOM представляет собой обычный объект JavaScript, который наследуется от Object, поэтому мы можем манипулировать объектом DOM, как любым объектом JS.

const el = document.getElementById('name')
el.foo = 'bar'
el.user = { name: 'jjc', age: '18'}

Вы также можете добавить к нему методы. Если вы хотите добавить атрибуты или методы к каждому элементу html, вы даже можете изменить его напрямую.Element.prototype, но мы не рекомендуем этого.

2. HTML-функции

Подобно атрибутам DOM, в дополнение к стандартным атрибутам, определенным в спецификации, HTML также может добавлять нестандартные атрибуты, такие как:

<input id="name" value="justjavac" foo="bar" />

Когда карта характеристик HTML DOM является только стандартным отображением атрибутов,Доступ к нестандартным свойствам приведет кundefined.

const el = document.getElementById('name')
el.foo === undefined

К счастью, объекты DOM также предоставляют API для управления функциями:

  • Element.hasAttribute(name)- Определить, существует ли функция
  • elem.getAttribute(name) — получить значение указанного атрибута
  • elem.setAttribute(name, value)- Установите значение указанного свойства
  • elem.removeAttribute(name)- Удаляет указанные характеристики

Вышеупомянутый API определен вElementначальство.

Согласно спецификации HTML, имена тегов и атрибутов не чувствительны к регистру, поэтому следующий код будет таким же:

el.getAttribute('id')
el.getAttribute('ID')
el.getAttribute('iD')

а также,атрибуты всегда являются строками илиnull. Если мы установим для атрибута нестроковое значение, движок преобразует это значение в строку. Свойства набираются:

el.getAttribute('checked') === '' // 特性是字符串
el.checked === false              // 属性是 boolean 类型的值

el.getAttribute('style') === 'color:blue' // 特性是字符串
typeof el.style === 'object'                 // 属性是 CSSStyleDeclaration 对象

Даже если все они являются строками, свойства и свойства могут быть разными, за одним исключением.href:

el.getAttribute('href') === '#tag' // 特性原样返回 html 设置的值
el.href === 'http://jjc.fun#tag'   // 属性返回解析后的完整 uri

3. Синхронизация свойств и атрибутов

При обновлении стандартной функции соответствующее свойство также обновляется, и наоборот.

ноinput.valueСинхронизация односторонняя, простоattribute --> property. Когда свойство изменяется, оно также обновляется, но после изменения свойство остается неизменным.

el.setAttribute('value', 'jjc');  // 修改特性
el.value === 'jjc'                // 属性也更新了  

el.value = 'newValue';            // 修改属性 
el.getAttribute('value')) === 'jjc' // 特性没有更新

4. Нестандартные функции

Нестандартные функции HTML не сопоставляются автоматически с атрибутами DOM. когда мы используемdata-атрибуты в начале сопоставляются со свойством набора данных DOM. Формат тире становится верблюжьим регистром:

el.setAttribute('data-my-name', 'jjc');
el.dataset.myName === 'jjc'

el.setAttribute('data-my-AGE', 18);
el.dataset.myAge === '18'

Пользовательские атрибуты и неканонические атрибуты

HTML позволяет нам настраивать теги и расширять атрибуты тегов, но мы рекомендуем использовать пользовательские атрибуты, которые вошли в спецификацию HTML5.data-*. Например, мы хотимdivдобавить тегageфункция, у нас может быть 2 варианта:

<div age="18">justjavac</div>
<div data-age="18">justjavac</div>

Хотя первый код короче, существует потенциальный риск. Поскольку спецификация HTML постоянно развивается, возможно, в какой-то будущей версии,ageбыла добавлена ​​как стандартная функция, которая может привести к ошибкам.

Прочитайте исходный текст:Атрибуты HTML и свойства DOM

Адрес обсуждения:#15

Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда

Категории