Ответ 1

Иногда атрибут не отображает изменения в свойстве.

Одним из примеров является атрибут/свойство checked флажка.

DEMO: http://jsfiddle.net/mxzL2/

<input type="checkbox" checked="checked"> change me

document.getElementsByTagName('input')[0].onchange = function() {

    alert('attribute: ' + this.getAttribute('checked') + '\n' +
          'property: ' + this.checked);
};

... тогда как атрибут/свойство ID останется в синхронизации:

DEMO: http://jsfiddle.net/mxzL2/1/

<input type="checkbox" checked="checked" id="the_checkbox"> change me

var i = 0;

document.getElementsByTagName('input')[0].onchange = function() {

    this.id += ++i;
    alert('attribute: ' + this.getAttribute('id') + '\n' +
          'property: ' + this.id);
};

И пользовательские свойства обычно не отображаются вообще. В этих случаях вам нужно получить атрибут.

Возможно, потенциально более полезным случаем будет ввод текста.

<input type="text" value="original">

... где атрибут не изменяется с изменениями из DOM или пользователя.

Как отмечено @Matt McDonald, есть свойства DOM, которые дадут вам начальное значение, которое будет отражать исходное значение атрибута.

HTMLInputElement.defaultChecked
HTMLInputElement.defaultValue

Ответ 2

Редкое исключение - это случай атрибутов элемента <form>, который мог бы столкнуться с элементами в форме. Например, рассмотрим следующий HTML:

<form id="theForm" method="post" action="save.php">
    <input name="action" value="edit">
</form>

Проблема заключается в том, что любой вход в форме создает свойство, соответствующее вводу name в элементе формы, переопределяя любое существующее значение для этого свойства. Поэтому в этом случае свойство action элемента формы является ссылкой на элемент <input> с именем action. Если этот вход не существует, свойство action вместо этого ссылается на атрибут action и содержит строку "save.php". Поэтому для свойств элементов формы, соответствующих атрибутам, например action и method, безопаснее использовать getAttribute().

var form = document.getElementById("theForm");

// Alerts HTMLInputElement in most browsers
alert( form.action );

// Alerts "save.php"
alert( form.getAttribute("action") );

// Alerts "post" because no input with name "method" exists
alert( form.method ); 

Это несчастливо; было бы лучше, если бы это сопоставление не существовало, так как свойство elements формы уже содержит все элементы формы, введенные ключом name. Я думаю, у нас есть Netscape, чтобы поблагодарить за это.

Live demo: http://jsfiddle.net/z6r2x/

Другие случаи использования атрибутов:

• При доступе к пользовательским атрибутам, например <div mymadeupattr="cheese"></div>
• При сериализации DOM и вы хотите получить значения из исходного HTML для входных атрибутов, таких как value и checked.

Ответ 3

Я могу только придумать еще 2 ситуации, когда атрибут accessing/setting будет иметь преимущества над свойством.

Атрибут стиля:

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

elem.setAttribute( "style", "width:100px;height:100px;" );

вместо этого:

elem.style.width = "100px";
elem.style.height = "100px";

или это:

var styles = {width: "100px", height: "100px"}, style;

for( style in styles ) {
elem.style[style] = styles[style];
}

Помните, что атрибут стиля настройки перезаписывает предыдущий. И, вероятно, лучше писать в любом случае, функция set set set.

Атрибут HREF:

Атрибут href обычно содержит значение, подобное "/products", однако свойство будет содержать разрешенный URL-адрес, например: " http://www.domain.com/products" вместо того, что вы действительно хотите: "/products". Поэтому, если вы хотите сделать что-то динамически с помощью ссылки, тогда чтение атрибута href вместо свойства лучше, потому что оно имеет значение, которое вы намеревались сделать.

Update

Я неожиданно обнаружил еще 2 варианта использования, и я уверен, что таких вещей больше.

Если вы хотите увидеть, имеет ли элемент специальный индексный индекс, простой способ - увидеть, имеет ли элемент атрибут. Поскольку значение по умолчанию значение для .tabIndex -property зависит от элемента и не может быть легко использовано, чтобы увидеть, имеет ли элемент пользовательский tabIndex.

Увидеть, имеет ли элемент пользовательское свойство .maxLength. Это также невозможно увидеть из свойства:

document.createElement("input").maxLength
//524288

Невозможно определить, было ли значение 524288 намеренно не иметь отношения к атрибуту.