Любое различие между элементом element.setAttribute ['attr'] element.attr

Ответ 1

Свойства и атрибуты элементов DOM совершенно разные, и эта разница является источником некоторой путаницы.

Одна из проблем заключается в том, что не каждый атрибут сопоставляет свойство с тем же именем. Например, атрибут value элемента <input> сопоставляется с свойством defaultValue, а свойство value не сопоставляется ни с каким атрибутом (кроме старого IE: см. Ниже).

Другой важной причиной, почему вы должны использовать свойства, является то, что более старые версии IE (< = 7 и режимы совместимости в более поздних версиях) неправильно реализуют getAttribute() и setAttribute(). Большинство атрибутов сопоставляются непосредственно с идентично именованными свойствами в IE, что имеет ряд неудачных эффектов, например, значение, указывающее, что установка атрибута обработчика события не работает корректно в IE. На следующей странице есть полезная информация: http://reference.sitepoint.com/javascript/Element/setAttribute

Существуют и другие различия. Например, атрибуты/свойства, имеющие отношение к URL-адресам, имеют некоторые расхождения в том, как обрабатываются относительные URL-адреса.

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

<input type="text" id="textbox" value="foo">

var textBox = document.getElementById("textbox");

console.log(textBox.getAttribute("value")); // "foo"
console.log(textBox.value); // "foo"
console.log(textBox.defaultValue); // "foo"

Теперь, если пользователь вводит текстовое поле или значение текстового поля изменяется с помощью script, мы видим, что значения свойств и атрибутов расходятся:

textBox.value = "bar";
console.log(textBox.getAttribute("value")); // "foo"
console.log(textBox.value); // "bar"
console.log(textBox.defaultValue); // "foo"

Установка значения атрибута теперь не влияет на текущее значение:

textBox.setAttribute("value", "baz");
console.log(textBox.getAttribute("value")); // "baz"
console.log(textBox.value); // "bar"
console.log(textBox.defaultValue); // "baz"

Ответ 2

Javascript гарантирует element["attr"] и element.attr то же самое.

setAttribute(), однако, не является частью самого языка, а уровня DOM над ним. Нет гарантии, что это будет так же, как запись в атрибут attr. Он может делать больше или даже меньше (т.е. Даже не обновлять атрибут attr объекта и требует, чтобы вы вызывали getAttribute(), чтобы вернуть значение).

На практике три способа обычно эквивалентны. Однако не забывайте о таких вещах, как this.