IE支持DOM importNode

Question

我一直在寻找网络,我很确定我已经知道答案("不"),但我想检查一下:

IE是否支持importNode()？有没有比走DOM和创建节点更好的选择？(我见过安东尼Holdener的CLASIC文章,但其超过一岁,现在,我希望无论是IE浏览器的发展,或有人有另一workarround)

谢谢.

Answer 1

Internet Explorer 9 DOM API中有一个函数document.importNode().但是,IE9在调用时会抛出脚本错误

SCRIPT16386:不支持此类接口

还需要定义源节点的命名空间(例如,当我们要导入SVG时 - 在IE9中,导入的节点似乎不被识别为SVG元素)

Phrogz建议这个有用的解决方法.但是,当我们导入具有特殊命名空间的元素(例如在xmlns属性中声明<svg xmlns="http://www.w3.org/2000/svg" …>…</svg>)时,会出现错误,clone.setAttributeNS(a.namespaceURI,a.nodeName,a.nodeValue)因为属性xmlns的namespaceURI为null.

有一些解决方法对我有用:

var newNode;
try {
  newNode = document.importNode(sourceDocumentElement, true);
}
catch(e) {
  newNode = importNode(sourceDocumentElement, true);
}

function importNode(node, allChildren) {
  switch (node.nodeType) {
    case document.ELEMENT_NODE:
      var newNode = document.createElementNS(node.namespaceURI, node.nodeName);
      if(node.attributes && node.attributes.length > 0)
        for(var i = 0, il = node.attributes.length; i < il; i++)
          newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i].nodeName));
      if(allChildren && node.childNodes && node.childNodes.length > 0)
        for(var i = 0, il = node.childNodes.length; i < il; i++)
          newNode.appendChild(importNode(node.childNodes[i], allChildren));
      return newNode;
      break;
    case document.TEXT_NODE:
    case document.CDATA_SECTION_NODE:
    case document.COMMENT_NODE:
      return document.createTextNode(node.nodeValue);
      break;
  }
}

Answer 2

我还没听说这已经改变了，在最近的一篇文章中John Resig

\n\n

\n

Internet Explorer 不支持 importNode 或领养节点

\n

\n\n

另请参阅有关跨浏览器 importnode()的 A List Apart 文章因为它包含针对 Internet Explorer 的特定解决方法。

\n\n

为后人引述，

\n\n

\n

我所有问题的解决方案就是根本不使用 DOM 方法，而是使用我自己的实现。这是我以跨浏览器兼容方式编码的 importNode() 问题的最终解决方案：（换行标记为 \xc2\xbb \xe2\x80\x94Ed。）

\n

\n\n

if (!document.ELEMENT_NODE) {\n  document.ELEMENT_NODE = 1;\n  document.ATTRIBUTE_NODE = 2;\n  document.TEXT_NODE = 3;\n  document.CDATA_SECTION_NODE = 4;\n  document.ENTITY_REFERENCE_NODE = 5;\n  document.ENTITY_NODE = 6;\n  document.PROCESSING_INSTRUCTION_NODE = 7;\n  document.COMMENT_NODE = 8;\n  document.DOCUMENT_NODE = 9;\n  document.DOCUMENT_TYPE_NODE = 10;\n  document.DOCUMENT_FRAGMENT_NODE = 11;\n  document.NOTATION_NODE = 12;\n}\n\ndocument._importNode = function(node, allChildren) {\n  switch (node.nodeType) {\n    case document.ELEMENT_NODE:\n      var newNode = document.createElement(node \xc2\xbb\n.nodeName);\n      /* does the node have any attributes to add? */\n      if (node.attributes && node.attributes \xc2\xbb\n.length > 0)\n        for (var i = 0; il = node.attributes.length;i < il)\n          newNode.setAttribute(node.attributes[i].nodeName, \n          node.getAttribute(node.attributes[i++].nodeName));\n      /* are we going after children too, and does the node have any? */\n      if (allChildren && node.childNodes && node.childNodes.length > 0)\n        for (var i = 0; il = node.childNodes.length; i < il)\n          newNode.appendChild(document._importNode(node.childNodes[i++], allChildren));\n      return newNode;\n      break;\n    case document.TEXT_NODE:\n    case document.CDATA_SECTION_NODE:\n    case document.COMMENT_NODE:\n      return document.createTextNode(node.nodeValue);\n      break;\n  }\n};\n

\n\n

\n

这是它的使用情况：

\n

\n\n

var newNode = null, importedNode = null;\n\nnewNode = xhrResponse.responseXML.getElementsByTagName(\'title\')[0].childNodes[0];\nif (newNode.nodeType != document.ELEMENT_NODE)\n  newNode = newNode.nextSibling;\nif (newNode) {\n  importedNode = document._importNode(newNode, true);\n  document.getElementById(\'divTitleContainer\').appendChild(importedNode);\n  if (!document.importNode)\n    document.getElementById(\'divTitleContainer\').innerHTML = document.getElementById(\'divTitleContainer\').innerHTML;\n}\n

\n