Ответ 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"