Kiedy używać setAttribute vs. attribute = w JavaScript?

From Javascript: the Definitive Guide , wyjaśnia rzeczy. Zwraca uwagę, że HTMLElement obiekty dokumentu HTML definiują właściwości JS, które odpowiadają wszystkim standardowym atrybutom HTML.

Więc wystarczy użyć setAttribute dla niestandardowych atrybutów.

Przykład:

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

Żadna z poprzednich odpowiedzi nie jest kompletna, a większość zawiera dezinformację.

Istnieją trzy sposoby dostępu do atrybutów elementu DOM W JavaScript. Wszystkie trzy działają niezawodnie w nowoczesnych przeglądarkach, o ile rozumiesz, jak z nich korzystać.

1. element.attributes

Elementy mają właściwość atrybuty , która zwraca aktywny NamedNodeMap Z Attr obiektów. Indeksy tego zbioru mogą być różne między przeglądarki. Tak więc zamówienie nie jest gwarantowane. NamedNodeMap posiada metody dodawania i usuwania atrybutów (odpowiednio getNamedItem i setNamedItem).

zauważ, że chociaż XML jawnie uwzględnia wielkość liter, Specyfikacja DOM wymaga znormalizowania nazw łańcuchów , więc nazwy przekazywane do getNamedItem są właściwie niewrażliwe na wielkość liter.

Przykładowe Użycie:

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

Metody te istnieją bezpośrednio na Element BEZ potrzeba dostępu attributes i jego metod, ale wykonują te same funkcje.

ponownie zauważ, że nazwy łańcuchów znaków są niewrażliwe na wielkość liter.

Przykładowe Użycie:

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. Właściwości obiektu DOM, takie jak element.id

Wiele atrybutów można uzyskać, korzystając z wygodnych właściwości obiektu DOM. To, które atrybuty istnieją, zależy od typu węzła DOM, a nie od tego, które atrybuty są zdefiniowane w HTML. Właściwości są zdefiniowane gdzieś w łańcuchu prototypów danego obiektu DOM. Określone właściwości zależą od typu elementu, do którego uzyskujesz dostęp. Na przykład, className i id są zdefiniowane na Element i istnieją na wszystkich węzłach DOM, które są elementami (np. Nie tekst lub komentarz). Ale value jest bardziej wąski. Jest zdefiniowana na HTMLInputElement i mogą nie istnieć na innych elementach.

zauważ, że właściwości JavaScript uwzględniają wielkość liter. Chociaż większość właściwości będzie używać małych liter, niektóre są camelCase. Więc zawsze sprawdzaj specyfikację, aby się upewnić.

Ten "wykres" rejestruje część łańcucha prototypów dla tych obiektów DOM. Nie jest nawet blisko ukończenia, ale oddaje ogólną strukturę.

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

Przykładowe Użycie:

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>

zastrzeżenie: jest to wyjaśnienie, w jaki sposób Specyfikacja HTML definiuje i nowoczesne przeglądarki obsługują atrybuty. Nie próbowałem radzić sobie z ograniczeniami starych, zepsutych przeglądarek. Jeśli potrzebujesz obsługa starych przeglądarek, oprócz tych informacji, musisz wiedzieć, co jest uszkodzone w tych przeglądarkach.

Jeden przypadek, który znalazłem, gdzie setAttribute jest konieczny, to zmiana atrybutów ARIA, ponieważ nie ma odpowiednich właściwości. Na przykład

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

Nie ma x.arialabel ani czegoś podobnego, więc musisz użyć setAttribute.

Edit: x ["Aria-label"] nie działa. Naprawdę potrzebujesz 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"

To wygląda jak jeden przypadek, w którym lepiej jest użyć setAttribute:

Dev.Opera-Wydajny 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);
}

"Kiedy używać setAttribute vs .atrybut = w JavaScript?"

Ogólną zasadą jest użycie .attribute i sprawdzenie, czy działa w przeglądarce.

..Jeśli to działa w przeglądarce, możesz iść.

..Jeśli nie, użyj .setAttribute(attribute, value) zamiast .attribute dla tego atrybutu.

Rinse-powtórz dla wszystkich atrybutów.

Metody ustawiania atrybutów (np. klasy) na elemencie: 1. el.className = string 2. el.setAttribute ('class', string) 3. el.atrybuty.setNamedItem(obiekt) 4. el.setAttributeNode (node)

Zrobiłem prosty test porównawczy (TUTAJ )

I wydaje się, że setAttributeNode jest około 3 razy szybszy niż setattribute.

Więc jeśli wydajność jest problemem-użyj "setAttributeNode"