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

Question 1

Вирази люблять Element.getAttribute("id")і Element.idповертають одне і те ж.

Який з них слід використовувати, коли нам потрібні атрибути об’єкта HTMLElement?

Чи існує якась проблема у переглядачах із цими методами, як getAttribute()і setAttribute()?

Або будь-який вплив на продуктивність між безпосереднім доступом до властивостей об’єкта та використанням цих методів атрибутів?

Question 2

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власності. Властивість DOM повертає trueабо, falseпоки атрибут повертає рядок "checked"або порожній рядок.

І тоді, є деякі властивості, які синхронізуються лише в один бік . Найкращий приклад - valueвластивість inputелемента. Зміна його значення за допомогою властивості DOM не призведе до зміни атрибута (редагувати: перевірити перший коментар для більшої точності).

Через ці причини я пропоную продовжувати використовувати властивості DOM , а не атрибути, оскільки їх поведінка відрізняється між браузерами.

Насправді є лише два випадки, коли вам потрібно використовувати атрибути:

Спеціальний атрибут HTML, оскільки він не синхронізується із властивістю DOM.
Щоб отримати доступ до вбудованого в HTML атрибута, яка не синхронізований від власності, і ви впевнені , що вам потрібен атрибут (наприклад, оригінал valueяк inputелемента).

Якщо ви хочете отримати більш детальне пояснення, настійно рекомендую прочитати цю сторінку . Це займе у вас лише кілька хвилин, але ви будете в захваті від інформації (яку я тут підсумував).

Question 3

getAttribute('attribute') зазвичай повертає значення атрибута як рядок, точно так, як це визначено в HTML-коді сторінки.

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

<a href="https://stackoverflow.com/foo"></a>
- a.href міститиме повну URL-адресу
<input type="checkbox" checked>
- input. selected буде true (логічне значення)
<input type="checkbox" checked="bleh">
- input. selected буде 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'>
- імг. ширина буде 50 (число)
<div style='background: lime;'></div>
- div.style буде об'єктом

Question 4

Згідно з цим тест jsPerf getAttribute є більш повільним, ніж idвластивість.

PS

Як не дивно, обидва твердження дуже погано працюють на IE8 (порівняно з іншими браузерами).

Question 5

Завжди використовуйте властивості, якщо у вас немає конкретної причини цього не робити.

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

Є деякі винятки :

доступ до атрибутів <form>елементів
доступ до користувацьких атрибутів (хоча я б взагалі не рекомендував використовувати власні атрибути)

Я писав про цю тему кілька разів на SO:

Question 6

.idзберігає накладні виклики функції. (що дуже мало, але ви запитали.)

Question 7

Спробуйте нижче приклад, щоб зрозуміти це повністю. Для нижченаведеного DIV

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

Element.getAttribute('class')Повернуся , myclassале ви повинні використовувати , Element.classNameякий витягує його з властивості DOM.

Question 8

Однією з областей, де це робить велику різницю, є стилі 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 та відповідним чином оформлений.