What is the difference between createElementNS with a prefix and without it?

Question

In a JS linked to an XHTML page, I create new elements using createElementNS, like this:

const NS = 'http://my.site/xmlns';
const el1 = document.createElementNS(NS, 'custom');
const el2 = document.createElementNS(NS, 'p:custom');

I cannot understand what is the difference between the element created with namespace prefix in second argument and the one created without it. For instance, these CSS rules have identical effect on both elements:

@namespace p url('http://my.site/xmlns');
p|custom { background: yellow; }

Next, call of document.getElementsByTagNameNS(NS, 'custom') returns a HtmlCollection with both elements, whereas document.getElementsByTagNameNS(NS, 'p:custom') returns an empty HtmlCollection, what seems strange to me.

So what is the difference between creating elements with a namespace prefix and without it?

Answer 1

document.createElementNS() expects the second parameter to be a qualified tag name. p:custom is a qualified tag name, so document.createElementNS(NS, 'p:custom') is more correct; I suspect the reason document.createElementNS(NS, 'custom') works is due to legacy reasons.

document.getElementsByTagNameNS() on the other hand expects the second parameter to be a local tag name. custom is a local tag name. (If custom does not have a namespace, then it is also its qualified name.)

Since your elements are namespaced, and their qualified name is p:custom, their local name is custom, and so document.getElementsByTagNameNS(NS, 'p:custom') returns nothing because p:custom is not their local name.