Когда использовать setAttribute против attribute= в JavaScript?

ИзJavascript: окончательное руководство , оно проясняет вещи. Он отмечает, чтоHTMLElement объекты HTML doc определяют свойства JS, соответствующие всем стандартным атрибутам HTML.

Таким образом, вам нужно использовать только setAttribute для нестандартных атрибутов.

Пример:

node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // works

Ни один из предыдущих ответов не является полным и большинство содержит дезинформацию.

Существует три способа доступа к атрибутам дом элемент В JavaScript. Все три надежно работают в современных браузерах, если вы понимаете, как их использовать.

1. element.attributes

Элементы имеют свойствоатрибуты , которое возвращает живойNamedNodeMap объектовAttr . Индексы этой коллекции могут отличаться между собой. браузеры. Итак, заказ не гарантирован. NamedNodeMap имеет методы добавления и удаления атрибутов (getNamedItem и setNamedItem соответственно).

обратите внимание, что хотя XML явно чувствителен к регистру, спецификация DOM вызывает нормализацию имен строк , поэтому имена, передаваемые в getNamedItem, фактически нечувствительны к регистру.

Пример Использования:

var div = document.getElementsByTagName('div')[0];

//you can look up specific attributes
var classAttr = div.attributes.getNamedItem('CLASS');
document.write('attributes.getNamedItem() Name: ' + classAttr.name + ' Value: ' + classAttr.value + '<br>');

//you can enumerate all defined attributes
for(var i = 0; i < div.attributes.length; i++) {
  var attr = div.attributes[i];
  document.write('attributes[] Name: ' + attr.name + ' Value: ' + attr.value + '<br>');
}

//create custom attribute
var customAttr = document.createAttribute('customTest');
customAttr.value = '567';
div.attributes.setNamedItem(customAttr);

//retreive custom attribute
customAttr = div.attributes.getNamedItem('customTest');
document.write('attributes.getNamedItem() Name: ' + customAttr.name + ' Value: ' + customAttr.value + '<br>');

<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>

2. element.getAttribute & element.setAttribute

Эти методы существуют непосредственно на Element без необходимость обращаться к attributes и его методам, но выполнять те же функции.

опять же, обратите внимание, что имя строки не чувствительно к регистру.

Пример Использования:

var div = document.getElementsByTagName('div')[0];

//get specific attributes
document.write('Name: class Value: ' + div.getAttribute('class') + '<br>');
document.write('Name: ID Value: ' + div.getAttribute('ID') + '<br>');
document.write('Name: DATA-TEST Value: ' + div.getAttribute('DATA-TEST') + '<br>');
document.write('Name: nonStandard Value: ' + div.getAttribute('nonStandard') + '<br>');


//create custom attribute
div.setAttribute('customTest', '567');

//retreive custom attribute
document.write('Name: customTest Value: ' + div.getAttribute('customTest') + '<br>');

<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>

3. Свойства объекта DOM, такие как element.id

Многие атрибуты могут быть доступны с помощью удобных свойств объекта DOM. Какие атрибуты существуют, зависит от типа узла DOM, а не от того, какие атрибуты определены в HTML. Свойства определены где-то в цепи прототипов объекта DOM, о котором идет речь. Определенные свойства зависят от типа элемента, к которому вы обращаетесь. Например, className и id определены на Element и существуют на всех узлах DOM, которые являются элементами (т. е. не текст или узлы комментариев). Но {20]} уже. Это определено на HTMLInputElement и может не существовать на других элементах.

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

Эта "диаграмма" захватывает часть цепочки прототипов для этих объектов DOM. Он даже не близок к завершению, но он отражает общую структуру.

                      ____________Node___________
                      |               |         |
                   Element           Text   Comment
                   |     |
           HTMLElement   SVGElement
           |         |
HTMLInputElement   HTMLSpanElement

Пример Использования:

var div = document.getElementsByTagName('div')[0];

//get specific attributes
document.write('Name: class Value: ' + div.className + '<br>');
document.write('Name: id Value: ' + div.id + '<br>');
document.write('Name: ID Value: ' + div.ID + '<br>'); //undefined
document.write('Name: data-test Value: ' + div.dataset.test + '<br>'); //.dataset is a special case
document.write('Name: nonStandard Value: ' + div.nonStandard + '<br>'); //undefined

<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>

предостережение: это объяснение того, как спецификация HTML определяет и современные браузеры обрабатывают атрибуты. Я не пытался бороться с ограничениями древних, сломанных браузеров. Если вам это нужно поддержка старых браузеров, в дополнение к этой информации, вам нужно будет знать, что сломано в этих браузерах.

Я нашел один случай, когда setAttribute необходимо изменить атрибуты арии, так как нет соответствующих свойств. Например

x.setAttribute('aria-label', 'Test');
x.getAttribute('aria-label');

Там нет x.arialabel или чего-то подобного, поэтому вам нужно использовать setAttribute.

Edit: x["aria-label"] не работает. Вам действительно нужен setAttribute.

x.getAttribute('aria-label')
null
x["aria-label"] = "Test"
"Test"
x.getAttribute('aria-label')
null
x.setAttribute('aria-label', 'Test2')
undefined
x["aria-label"]
"Test"
x.getAttribute('aria-label')
"Test2"

Это выглядит как один случай, когда лучше использовать setAttribute:

Дэв.Опера-Эффективный JavaScript

var posElem = document.getElementById('animation');
var newStyle = 'background: ' + newBack + ';' +
'color: ' + newColor + ';' +
    'border: ' + newBorder + ';';
if(typeof(posElem.style.cssText) != 'undefined') {
    posElem.style.cssText = newStyle;
} else {
    posElem.setAttribute('style', newStyle);
}

"Когда использовать setAttribute vs .атрибут= в JavaScript?"

Общее правило состоит в том, чтобы использовать .attribute и проверить, работает ли он в браузере.

..Если он работает в браузере,вы можете идти.

..Если это не так, используйте .setAttribute(attribute, value) вместо .attribute для этого атрибута.

Промыть-повторить для всех атрибутов.

Ну, если вы ленивы, вы можете просто использовать .setAttribute. Это должно хорошо работать в большинстве браузеров. (Хотя браузеры, поддерживающие .attribute , могут оптимизировать его лучше, чем .setAttribute(attribute, value).)

Методы задания атрибутов (например, класса) для элемента: 1. эль.className = строка 2. эль.setAttribute ('class', string) 3. эль.атрибуты.setNamedItem (объект) 4. эль.setAttributeNode (node)

Я сделал простой тест бенчмарка (здесь)

И кажется, что setAttributeNode примерно в 3 раза быстрее, чем при использовании setAttribute.

Поэтому, если производительность является проблемой-используйте "setAttributeNode"