javascript - 如何找出属性在当前范围内引用的命名空间？

Question

假设我有一个嵌入式 svg：

<svg 
  width="5cm" 
  height="6cm"
  viewBox="0 0 5 6"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
...
  <a id="foo">...</a>
...
</svg>

我想向#foowith添加任意属性.setAttributeNS()，但只给定属性名称（例如xlink:href）和值，而不是属性命名空间。

有没有办法查找名称所属的命名空间？似乎应该有，因为我可以硬编码<a xlink:href="...">，它会解析到正确的命名空间，所以应该有一些我可以利用的范围。

例如xlink:href，我可以遍历 的祖先，#foo直到找到svg'xmlns:xlink属性，并将该值用于命名空间，但似乎应该更容易。

Answer 1

答案在 W3 规范中：使用lookupNamespaceURI.

Answer 2

当使用正确的 namespaceURI 时，如果命名空间已经有一个前缀，那么 DOM 实现应该使用它。

var doc = (new DOMParser()).parseFromString(
    '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>',
    "application/xml");
doc.documentElement.setAttributeNS(
    "http://www.w3.org/1999/xlink",
    "href", "data:text/plain,yep");
console.log((new XMLSerializer()).serializeToString(doc));

>>> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:text/plain,yep"/>

除此之外，确实没有其他办法，只能以某种方式遍历节点并自己弄清楚。

Answer 3

setAttribute 会起作用吗？它不需要命名空间。

https://developer.mozilla.org/en-US/docs/Web/API/element.setAttribute?redirectlocale=en-US&redirectslug=DOM%2Felement.setAttribute

或者您可以将 null 传递给 setAttributeNS。