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

имеет наилучшую практику использования setAttribute вместо точки (.) была разработана нотация атрибутов?

например:

myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");

или

myObj.className = "nameOfClass";
myObj.id = "someID";
186
attributes javascript setattribute

7 ответов

вы всегда должны использовать direct .attribute форма (но см. ссылку quirksmode ниже), если вы хотите программный доступ в JavaScript. Он должен правильно обрабатывать различные типы атрибутов (думать "onload").

использовать getAttribute/setAttribute когда вы хотите иметь дело с DOM как есть (например, только буквальный текст). Разные браузеры путают два. См.режимы причуды: атрибут (в)Совместимость.

64

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

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

пример:

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

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

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

1. element.attributes

элементы имеют свойство атрибуты это возвращает live NamedNodeMap of 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 чувствительны к регистру. Хотя большинство свойств будет использовать нижний регистр, некоторые из них camelCase. Поэтому всегда проверяйте спецификацию, чтобы быть уверенным.

эта "диаграмма" захватывает часть цепочки прототипов для этих объектов 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 определяет и современные браузеры обрабатывают атрибуты. Я не пытался иметь дело с ограничениями древних, сломанных браузеров. Если вам нужно поддерживать старые браузеры, в дополнение к этой информации, вам нужно будет знать, что сломано в этих браузерах.

50

один случай я нашел где 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"
11

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

Dev.Opera-Эффективный 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);
}
1

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

общее правило-использовать .attribute и проверьте, работает ли он в браузере.

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

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

Rinse-повторите для всех атрибутов.

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

0

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

Я сделал простой тест тест (здесь)

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

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

0