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

Вы всегда должны использовать прямую форму .attribute (но см. Ссылку quirksmode ниже), если вам нужен программный доступ в JavaScript. Он должен правильно обрабатывать различные типы атрибутов (подумайте о «загрузке»).

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

Это проясняет ситуацию из Javascript: The Definitive Guide. Он отмечает, что объекты HTMLElement документа HTML определяют свойства JS, которые соответствуют всем стандартным атрибутам HTML.

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

Пример:

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

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

Есть три способа доступа к атрибутам элемента DOM в 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, которые являются элементами, но не узлами текста или комментариев. value определяется более узко. Он доступен только на 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 определяет атрибуты и как современные вечнозеленые браузеры обрабатывают их. Конечно, есть старые браузеры (IE, Netscape и т. Д.), Которые не соответствуют спецификации или даже предшествуют ей. Если вам нужна поддержка старых устаревших (неработающих) браузеров, вам понадобится дополнительная информация, чем здесь.

Один случай, когда я обнаружил, что setAttribute необходимо, - это изменение атрибутов ARIA, поскольку нет соответствующих свойств. Например

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

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

Изменить: 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"

Эти ответы на самом деле не устраняют большую путаницу между свойствами и атрибутами. Кроме того, в зависимости от прототипа Javascript, иногда вы можете использовать свойство элемента для доступа к атрибутам, а иногда нет.

Во-первых, вы должны помнить, что HTMLElement - это объект Javascript. Как и все объекты, у них есть свойства. Конечно, вы можете создать свойство, называемое почти всем, что захотите, внутри HTMLElement, но оно не должно иметь ничего общего с DOM (тем, что находится на странице). Точечная запись (.) предназначена для свойств. Теперь есть некоторые специальные свойства, которые сопоставлены с атрибутами, и на момент написания статьи гарантировано было только 4 (подробнее об этом позже).

Все HTMLElement включают свойство под названием attributes. HTMLElement.attributes - это живой NamedNodeMap объект, который относится к элементам в DOM. Live означает, что когда узел изменяется в DOM, они меняются на стороне JavaScript, и наоборот. Атрибуты DOM, в данном случае, являются рассматриваемыми узлами. У Node есть свойство .nodeValue, которое вы можете изменить. Объекты NamedNodeMap имеют функцию под названием setNamedItem, в которой вы можете изменить весь узел. Вы также можете напрямую получить доступ к узлу с помощью ключа. Например, вы можете сказать .attributes["dir"], что совпадает с .attributes.getNamedItem('dir'); (примечание, NamedNodeMap регистронезависимо, поэтому вы также можете передать 'DIR');

Аналогичная функция находится прямо в HTMLElement, где вы можете просто вызвать setAttribute, который автоматически создаст узел, если он не существует, и установит nodeValue. Также есть некоторые атрибуты, к которым можно получить прямой доступ как к свойствам в HTMLElement через специальные свойства, например dir. Вот примерное изображение того, как это выглядит:

HTMLElement {
  attributes: {
    setNamedItem: function(attr, newAttr) { 
      this[attr] = newAttr;
    },    
    getNamedItem: function(attr) {
      return this[attr];
    },
    myAttribute1: {
      nodeName: 'myAttribute1',
      nodeValue: 'myNodeValue1'
    },
    myAttribute2: {
      nodeName: 'myAttribute2',
      nodeValue: 'myNodeValue2'
    },
  }
  setAttribute: function(attr, value) { 
    let item = this.attributes.getNamedItem(attr);
    if (!item) {
      item = document.createAttribute(attr);
      this.attributes.setNamedItem(attr, item);
    }
    item.nodeValue = value;
  },
  getAttribute: function(attr) { 
    return this.attributes[attr] && this.attributes[attr].nodeValue;
  },
  dir: // Special map to attributes.dir.nodeValue || ''
  id:  // Special map to attributes.id.nodeValue || ''
  className: // Special map to attributes.class.nodeValue || '' 
  lang: // Special map to attributes.lang.nodeValue || ''

}

Таким образом, вы можете изменить атрибуты dir 6 способами:

  // 1. Replace the node with setNamedItem
  const newAttribute = document.createAttribute('dir');
  newAttribute.nodeValue = 'rtl';
  element.attributes.setNamedItem(newAttribute);

  // 2. Replace the node by property name;
  const newAttribute2 = document.createAttribute('dir');
  newAttribute2.nodeValue = 'rtl';
  element.attributes['dir'] = newAttribute2;
  // OR
  element.attributes.dir = newAttribute2;

  // 3. Access node with getNamedItem and update nodeValue
  // Attribute must already exist!!!
  element.attributes.getNamedItem('dir').nodeValue = 'rtl';

  // 4. Access node by property update nodeValue
  // Attribute must already exist!!!
  element.attributes['dir'].nodeValue = 'rtl';
  // OR
  element.attributes.dir.nodeValue = 'rtl';

  // 5. use setAttribute()  
  element.setAttribute('dir', 'rtl');
  
  // 6. use the UNIQUELY SPECIAL dir property
  element["dir"] = 'rtl';
  element.dir = 'rtl';

Вы можете обновить все свойства с помощью методов №1–5, но только dir, id, lang и className с помощью метода №6.

Расширения HTMLElement

HTMLElement имеет эти 4 особых свойства. Некоторые элементы являются расширенными классами HTMLElement и имеют даже больше отображаемых свойств. Например, HTMLAnchorElement содержит HTMLAnchorElement.href, HTMLAnchorElement.rel и HTMLAnchorElement.target. Но будьте осторожны, если вы устанавливаете эти свойства для элементов, которые не имеют этих специальных свойств (например, на HTMLTableElement), тогда атрибуты не изменяются, и они являются просто обычными настраиваемыми свойствами. Чтобы лучше понять, вот пример его наследования:

HTMLAnchorElement extends HTMLElement {
  // inherits all of HTMLElement
  href:    // Special map to attributes.href.nodeValue || ''
  target:  // Special map to attributes.target.nodeValue || ''
  rel:     // Special map to attributes.ref.nodeValue || '' 
}

Настраиваемые свойства

Теперь большое предупреждение: Как и все объекты Javascript, вы можете добавлять настраиваемые свойства. Но это ничего не изменит в DOM. Ты можешь сделать:

  const newElement = document.createElement('div');
  // THIS WILL NOT CHANGE THE ATTRIBUTE
  newElement.display = 'block';

Но это то же самое, что и

  newElement.myCustomDisplayAttribute = 'block';

Это означает, что добавление настраиваемого свойства не будет связано с .attributes[attr].nodeValue.

Производительность

Я создал тестовый пример jsperf, чтобы показать разницу: https://jsperf.com/set-attribute-comparison. В основном по порядку:

1. Настраиваемые свойства, поскольку они не влияют на модель DOM и не являются атрибутами.
2. Специальные сопоставления, предоставляемые браузером (dir, id, className).
3. Если атрибуты уже существуют, element.attributes.ATTRIBUTENAME.nodeValue =
4. setAttribute ();
5. Если атрибуты уже существуют, element.attributes.getNamedItem(ATTRIBUTENAME).nodeValue = newValue
6. element.attributes.ATTRIBUTENAME = newNode
7. element.attributes.setNamedItem(ATTRIBUTENAME) = newNode

Заключение (TL; DR)

• Используйте специальные сопоставления свойств из HTMLElement: element.dir, element.id, element.className или element.lang.

• Если вы на 100% уверены, что элемент является расширенным HTMLElement со специальным свойством, используйте это специальное сопоставление. (Вы можете проверить с if (element instanceof HTMLAnchorElement)).

• Если вы на 100% уверены, что атрибут уже существует, используйте element.attributes.ATTRIBUTENAME.nodeValue = newValue.

• Если нет, используйте setAttribute().

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

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

..Если он работает в браузере, все готово.

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

Повторное полоскание для всех атрибутов.

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

Это похоже на тот случай, когда лучше использовать 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. el.className = string 2. el.setAttribute ('class', string) 3. el.attributes.setNamedItem (объект) 4. el.setAttributeNode (узел)

Я провел простой тест производительности (здесь)

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

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

Интересный вывод из скрипта Google API по этому поводу:

Делают они это так:

var scriptElement = document.createElement("script");
scriptElement = setAttribute("src", "https://some.com");
scriptElement = setAttribute("nonce", "https://some.com");
scriptElement.async = "true";

Обратите внимание, как они используют setAttribute для «src» и «nonce», а затем .async = ... для атрибута «async».

Я не уверен на 100%, но, вероятно, это потому, что "async" поддерживается только в браузерах, которые поддерживают прямое .attr = присвоение. Таким образом, нет смысла пытаться sestAttribute("async"), потому что, если браузер не понимает .async=... - он не будет понимать атрибут "async".

Надеюсь, это полезная информация из моего текущего исследовательского проекта "Un-minify GAPI". Поправьте меня если я ошибаюсь.

Это очень хорошее обсуждение. У меня был один из тех моментов, когда я хотел или, скажем так, надеялся (удачно, что я мог бы добавить) заново изобрести колесо, будь то квадратное. Любые способы, описанные выше, являются хорошим обсуждением, поэтому любой, кто придет сюда, будет искать, в чем разница между свойством Element и атрибутом. вот моя копейка, и мне пришлось это выяснить на собственном горьком опыте. Я бы сказал, что это будет просто, чтобы не было излишнего технического жаргона.

Предположим, у нас есть переменная, называющая «А». мы привыкли к следующему.

Below will throw an error because simply it put its is kind of object that can only have one property and that is singular left hand side = singular right hand side object. Every thing else is ignored and tossed out in bin.

let A = 'f';
A.b =2;
console.log(A.b);

кто решил, что это должно быть единственное число = единственное число. Люди, которые создают стандарты JavaScript и html, и вот как работают движки.

Давайте изменим пример.

let A = {};
A.b =2;
console.log(A.b);

На этот раз это работает ... потому что мы явно об этом сказали и кто решил, что мы можем сказать это в этом случае, но не в предыдущем случае. Опять люди, которые создают стандарты JavaScript и html.

Я надеюсь, что мы находимся в этом вопросе, давайте еще больше усложним его

let A = {};
A.attribute ={};
A.attribute.b=5;
console.log(A.attribute.b); // will work

console.log(A.b); // will not work

То, что мы сделали, - это дерево видов уровня 1, а затем подуровни неособого объекта. Если вы не знаете, что где, и не называете это так, иначе не будет работать.

Это то, что происходит с HTMLDOM, когда его проанализированное и нарисованное дерево DOm создается для каждого ЭЛЕМЕНТА HTML. Каждый из них имеет уровень свойств. Некоторые из них предопределены, а некоторые нет. Здесь появляются биты ID и VALUE. За сценой они отображаются в соотношении 1: 1 между свойством уровня 1 и свойством уровня солнца, также называемым атрибутами. Таким образом, изменение одного меняет другое. Это было то, что схема вещей получателя и установщика объектов играет роль.

let A = {
attribute :{
id:'',
value:''
},
getAttributes: function (n) {
    return this.attribute[n];
  },
setAttributes: function (n,nn){
this.attribute[n] = nn;
if(this[n]) this[n] = nn;
},
id:'',
value:''
};



A.id = 5;
console.log(A.id);
console.log(A.getAttributes('id'));

A.setAttributes('id',7)
console.log(A.id);
console.log(A.getAttributes('id'));

A.setAttributes('ids',7)
console.log(A.ids);
console.log(A.getAttributes('ids'));

A.idsss=7;
console.log(A.idsss);
console.log(A.getAttributes('idsss'));

Это то, что показано выше, у ELEMENTS есть еще один набор так называемых атрибутов списка свойств, и у него есть свои собственные основные свойства. между ними есть некоторые предопределенные свойства, которые отображаются как 1: 1, например. Идентификатор является общим для всех, но не имеет значения и src. когда синтаксический анализатор достигает этой точки, он просто открывает словарь о том, что делать, когда присутствуют такие-то и такие-то.

Все элементы имеют свойства и атрибуты, а некоторые элементы между ними являются общими. То, что является общим для одного, не является общим для другого.

В старые времена HTML3 и всего остального мы сначала работали с html, а затем с JS. Сейчас все наоборот, поэтому использование встроенного onlclick стало такой мерзостью. В HTML5 все продвинулось вперед, где есть много списков свойств, доступных в виде коллекции, например. класс, стиль. Раньше цвет был свойством, теперь он перемещен в CSS для обработки и больше не является допустимым атрибутом.

Element.attributes - это список дополнительных свойств, содержащихся в свойстве Element.

Если вы не можете изменить геттер и сеттер свойства Element, что почти очень маловероятно, так как это нарушит всю функциональность, обычно не может быть записано с места в карьер просто потому, что мы определили что-то как A.item не обязательно означает, что Js-движок также будет запускать другой строка функции, чтобы добавить его в Element.attributes.item.

Я надеюсь, что это даст некоторое представление о том, что к чему. Просто ради этого я попробовал Element.prototype.setAttribute с настраиваемой функцией, он просто сломал все вместе, поскольку он перекрыл собственный набор функций, которые функция set attribute играла за сценой.