Difference between setAttribute and setAttributeNS(null,

Question

What is the difference between calling setAttribute and setAttributeNS with null as the namespace parameter?

Also is there an issue with using getAttribute() and then setAttributeNS ?

Answer 1

setAttribute() is a DOM 1 function. setAttributeNS() is a DOM 2 function that resolves the problem of conflicting tag or attribute names by specifying the xmlns namespace that should apply to the tag/attribute in the first argument.

If an attribute does not have a defined namespace prefix, the first argument must be null. You could use setAttribute() but for consistency it is advisable to stick to setAttributeNS(). See:

https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course#Scripting_in_namespaced_XML

"However, note carefully: the Namespaces in XML 1.1 recommendation states that the namespace name for attributes without a prefix does not have a value. In other words, although the attributes belong to the namespace of the tag, you do not use the tag's namespace name. Instead, you must use null as the namespace name for unqualified (prefixless) attributes."

Answer 2

Here's an explanation in English, from the MDN docs:

// Given:
//   <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
//     special:specialAlign="utterleft" width="200px" /> 

d = document.getElementById("div1"); 
d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); 

// Now:
//   <div id="div1" width="200px" />

So from this, it appears that xmlns:special="http://www.mozilla.org/ns/specialspace" is a declaration of the namespace special, which is then used to contextualize special:specialAlign.