接頭辞付きのcreateElementNSの違いは何ですか？ XHTMLページにリンクされているJSで

Question

は、私はこのように、createElementNSを使用して新しい要素を作成します。

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

私は2番目の引数に名前空間接頭辞を使用して作成要素とせずに作成したものとの違いが何であるかを理解することはできませんそれ。例えば、これらのCSSルールは両方要素で同じ効果があります。

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

次のdocument.getElementsByTagNameNS(NS, 'p:custom')が私には奇妙に思える、空HtmlCollectionを返すのに対し、document.getElementsByTagNameNS(NS, 'custom')の呼び出しは、HtmlCollectionとの両方の要素を返します。

だから、名前空間接頭辞付きの要素とそれを持たない要素の作成の違いは何ですか？

Answer 1

document.createElementNS()は、2番目のパラメータが修飾タグ名であると想定しています。 p:customは修飾タグ名なので、document.createElementNS(NS, 'p:custom')がより正確です。私はその理由を疑っているdocument.createElementNS(NS, 'custom')の作品は、遺産の理由によるものです。一方、第2のパラメータがローカルタグ名であることを期待する。 customはローカルタグ名です。 （customが名前空間を持っていない場合、それはまた、その修飾名です。）

あなたの要素が名前空間、およびその修飾名がp:customでいるので、自分のローカル名がcustomで、p:customではないので、そうdocument.getElementsByTagNameNS(NS, 'p:custom')は何も返しませんそのローカル名。