Свойства и атрибуты элементов DOM весьма различны, и это различие является источником некоторой путаницы.
Одна проблема состоит в том, что не каждый атрибут отображается на свойство с тем же именем.Например, атрибут value элемента <input> отображается на свойство defaultValue, а свойство value не отображается ни на один атрибут (кроме старого IE: см. Ниже).
Другая основная причина, по которой вам следует использовать свойства, состоит в том, что более старые версии IE (<= 7 и режимы совместимости в более поздних версиях) неправильно реализуют <code>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"
Теперь, если пользователь вводит текстовое поле или значение текстового поля изменяется с помощью скрипта, мы видим, что значения свойств и атрибутов расходятся:
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"