it-swarm.com.ru

getAttribute () против свойств объекта Element?

Выражения типа Element.getAttribute("id") и Element.id возвращают одно и то же.

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

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

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

87
P K

getAttribute извлекает attribute элемента DOM, а el.id извлекает property этого элемента 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. Свойство DOM возвращает true или false, а атрибут возвращает строку "checked" или пустую строку.

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

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

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

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

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

114
Florian Margaine

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

Однако element.attribute может вернуть нормализованное или рассчитанное значение атрибута. Примеры:

  • <a href="/foo"></a>
    • a.href будет содержать полный URL
  • <input type="checkbox" checked>
    • input.checked будет true (булево)
  • <input type="checkbox" checked="bleh">
    • input.checked будет true (булево)
  • <img src='http://dummyimage.com/64x64/000/fff'>
    • img.width будет 0 (число) до загрузки изображения
    • img.width будет 64 (число), когда изображение (или первые несколько его байтов) загружено
  • <img src='http://dummyimage.com/64x64/000/fff' width="50%">
    • img.width будет рассчитано 50%
  • <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
    • img.width будет 50 (число)
  • <div style='background: Lime;'></div>
    • div.style будет объектом
9
Salman A

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

3
gdoron

Согласно этот тест jsPerfgetAttribute более медленный, чем свойство id.

PS

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

3
mamoo

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

  • getAttribute() и setAttribute() не работают в более старых IE (и режим совместимости в более поздних версиях)
  • свойства более удобны (в частности, те, которые соответствуют логическим атрибутам)

Есть некоторые исключения :

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

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

3
Tim Down

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

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

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

0
Hrushikesh

Одна из областей, где это имеет большое значение, - это 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 и соответствующим образом оформлен.

0
Jsilvermist