All geek questions in one place

Element.setAttribute ('prop', value) vs element.prop = value

We have a setAttribute method for DOM elements.

https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

How is this different from using below?

domElement.propName = value

Is there any benefit to any approach?

Thanks.

+4
source share
1 answer

domElement.setAttribute('propName', obj) sets the XML attribute, it will be converted to a string and added to the DOM tag.

domElement.propName sets the domElement.propName property, it can be of any type. It sets it to a JS object that wraps the implementation of the DOM object.

They do not have the same effect, unless you are dealing with an attribute that is recognized by a parser like src,id,value . These properties are copied to the expando property, but there are many holes for rabbits and cases when it does not work reliably (usually when expando does not accept a string, for example onclick, checked )

This example shows that they are different.

 domElement.setAttribute('someProp', 5); console.log(domElement.someProp); // undefined domElement.someProp = 10; console.log(domElement.someProp); // 10 console.log(domElement.getAttribute('someProp')); // "5" -> it a string

Always using expando's DOM properties is less likely to cause problems. The only time you want to use setAttribute is when you need to serialize a node (using outerHTML ) and you want this attribute reflected in serialization

+8
source

Source: https://habr.com/ru/post/1437697/

More articles:


All Articles