Question

在浏览器环境中，以这种方式创建一个svg元素 svg = document.createElement('svg');
将它附加到body并使用svg元素填充不起作用，因为
svg.namespaceURI === 'http://www.w3.org/1999/xhtml'
但是这样做 svg = document.createElementNS('http://www.w3.org/2000/svg','svg')
它会工作。
这是合理的，因为该元素应该以 svg方式处理而不是 html方式 同样，创造 select = document.createElementNS('xxxx','select')
并且附加到正文后，该元素不会显示为众所周知的select下拉列表，因为浏览器会被告知它不是http://www.w3.org/1999/xhtml:select元素，而是xxxx:select。
根据节点本身的NS（当识别时），节点处理被调度到不同的处理器是否可以为Document定义自定义namespaceURI，以便让其具有特定nsURI的节点以自定义方式处理，可能通过函数？

Answer 1

Note, not certain what expected result is ? Answer attempts to demonstrate one method of using a ProcessingInstruction

// create `ProcessingInstruction`
var p = document.createProcessingInstruction("js", "{\"color\":\"blue\"}");
var div = document.getElementById("process");
document.body.insertBefore(p, div);
// use `ProcessingInstruction`
div.style.color = JSON.parse(div.previousSibling.nodeValue).color;

<!doctype html>
<html>
<body>
  <div id="process">Process</div>
</body>
</html>

浏览器自定义命名空间元素处理器

1 个答案: