getAttribute () против свойств объекта элемента?

Question

getAttribute () против свойств объекта элемента?

выражения типа Element.getAttribute("id") и Element.id вернуться то же самое.

какой из них следует использовать, когда нам нужны атрибуты объекта HTMLElement?

есть ли кросс-браузер проблема с этими методами, как getAttribute() и setAttribute()?

или любое влияние на производительность между прямым доступом к свойствам объекта и использованием этих методов атрибутов?

512 7

javascript dom html

7 ответов:

Comments

Ничего не найдено.

Florian Margaine · Accepted Answer · 2015-09-24 19:11:26

getAttribute получает атрибут элемента DOM, в то время как el.id получает свойства этого элемента DOM. Это не одно и то же.

большую часть времени, свойства DOM синхронизируются с атрибутами.
синхронизация не гарантирует одинаковое значение. Классический пример находится между el.href и el.getAttribute('href') для элемента привязки.
для пример:
<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>
такое поведение происходит потому, что по словам W3C, свойство href должно быть хорошо сформированной ссылкой. Большинство браузеров уважают этот стандарт (угадайте, кто этого не делает?).

есть еще один случай для input ' s checked собственность. Возвращает собственность дом true или false в то время как атрибут возвращает строку "checked" или пустая строка.

и потом, есть некоторые свойства, которые синхронизируются в одну сторону только. Лучшим примером является value свойства input элемент. Изменение его значения через свойство DOM не изменит атрибут (изменить: проверьте первый комментарий для большей точности).

из-за этих причин, я бы предложил вам продолжать использовать DOM свойства, а не атрибуты, так как их поведение различается между браузерами.

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

пользовательский атрибут HTML, поскольку он не синхронизируется со свойством DOM.

для доступа к встроенному HTML-атрибуту, который не синхронизируется со свойством, и вы уверены, что вам нужен атрибут (например, исходный value на input элемент).

если вы хотите более подробное объяснение, я настоятельно рекомендую вам прочитать на этой странице. Это займет у вас всего несколько минут, но вы будете в восторге от информация (которую я здесь подытожил).

Salman A · Accepted Answer · 2013-10-13 05:54:00

getAttribute('attribute') обычно возвращает значение атрибута в виде строки, точно как определено в HTML-источнике страницы.
, element.attribute может возвращать нормализованное или вычисленное значение атрибута. Примеры:

<a href="/foo"></a>

a. href будет содержать полное URL

<input type="checkbox" checked>

вход.проверено будет справедливо (логическое)

<input type="checkbox" checked="bleh">

вход.проверено будет true (boolean)

<img src='http://dummyimage.com/64x64/000/fff'>

img.ширина будет 0 (число) перед загрузкой изображения

img.ширина будет 64 (число), когда изображение (или первые несколько байтов из него) загружается

<img src='http://dummyimage.com/64x64/000/fff' width="50%">

img.ширина будет из расчета 50%

<img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>

img.ширина будет 50 (количество)

<div style='background: lime;'></div>

div.стиль будет объектом

gdoron · Accepted Answer · 2012-04-23 15:12:02

.id сохранение вызова функции накладных расходов. (которых очень мало, но вы спросили. )

mamoo · Accepted Answer · 2012-04-23 15:13:50

по данным этот тест jsPerfgetAttribute медленнее, чем id собственность.

PS

Как ни странно, оба высказывания очень плохо на IE8 (по сравнению с другими браузерами).

Tim Down · Accepted Answer · 2017-05-23 15:02:39

всегда используйте свойства, если у вас нет конкретной причины не делать этого.

getAttribute() и setAttribute() сломаны в старых IE (и режим совместимости в более поздних версиях)

свойства более удобны (в частности, те, которые соответствуют логическим атрибутам)

здесь исключения:

доступ к атрибутам <form> элементов

доступ к пользовательским атрибутам (хотя я бы не рекомендуется использовать пользовательские атрибуты вообще)

я писал об этом предмете несколько раз на SO:

https://stackoverflow.com/a/7010268/96100

https://stackoverflow.com/a/4456805/96100

Hrushikesh · Accepted Answer · 2017-03-20 08:20:14

попробуйте ниже пример, чтобы понять это полностью. Для приведенного ниже DIV

<div class="myclass"></div>

The Element.getAttribute('class') вернутся myclass но вы должны использовать Element.className который извлекает его из свойства DOM.

Jsilvermist · Accepted Answer · 2017-04-27 03:57:39

одна область, где это имеет большое значение, - это стиль css, основанный на атрибутах.

рассмотрим следующее:
const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);
div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}
<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>
div с пользовательским набором свойств напрямую не отражает значение атрибута и не выбирается нашим селектором атрибутов (div[custom]) в css.

div с пользовательским атрибутом, установленным с помощью setAttribute, однако, может быть выбран с помощью атрибута CSS селектор, и стиль соответственно.