多个 HTML DOM - 解析和传输数据答案

【问题标题】：Multiple HTML DOMs - Parse and Transfer Data多个 HTML DOM - 解析和传输数据
【发布时间】：2012-11-12 01:02:27
【问题描述】：

我正在使用 jQuery 通过 Ajax 请求完整的 HTML5 文档。我希望能够解析它们并将元素传输到我的主页 DOM，理想情况下适用于所有主要浏览器，包括移动设备。我不想创建 iframe，因为我希望该过程尽可能快。使用 Chrome 和 Firefox，我可以执行以下操作：

var contents = $(document.createElement('html'));
contents[0].innerHTML = data; // data : HTML document string

这将创建一个适当的文档，有点令人惊讶，只是没有文档类型。然而，在 IE9 中，可能不会使用 innerHTML 来设置 html 元素的内容。我尝试执行以下操作，但没有任何运气：

创建一个 DOM，打开它，写入它并关闭它。问题：在doc.open 上，IE9 会抛出一个名为Unspecified error. 的异常。
```
var doc = document.implementation.createHTMLDocument('');
doc.open();
doc.write(data);
doc.close();
```
创建一个 ActiveX DOM。这一次，结果更好，但是在文档之间传输/复制元素时，IE9 崩溃了。不好，因为不支持 IE8（adoptNode / importNode 支持）。
```
var doc = new ActiveXObject('htmlfile'); 
doc.open();
doc.write(data);
doc.close();
contents = $(doc.documentElement);
document.adoptNode(contents);
```

我正在考虑递归地重新创建元素，而不是在我的文档之间传输它们，但这似乎是一项昂贵的任务，因为我可以有很多节点要传输。我喜欢我的最后一个 ActiveX 示例，因为它很可能适用于 IE8 和更早版本（至少用于解析）。

对此有什么想法吗？同样，我不仅需要能够解析 head 和 body，而且还需要能够将这些新元素附加到我的主 dom。

非常感谢！

【问题讨论】：

标签： javascript jquery ajax dom replace

【解决方案1】：

回答我自己的问题...为了解决我的问题，我使用了帖子中提到的所有解决方案，如果浏览器抛出错误，则使用 try/catch 块（哦，我们多么爱你 IE！）。以下适用于 IE8、IE9、Chrome 23、Firefox 17、iOS 4 和 5、Android 3 和 4。我还没有测试过 Android 2.1-2.3 和 IE7。

var contents = $('');
try {
  contents = $(document.createElement('html'));
  contents[0].innerHTML = data;
}
catch(e) {
  try {
    var doc = document.implementation.createHTMLDocument('');
    doc.open();
    doc.write(data);
    doc.close();
    contents = $(doc.documentElement);
  }
  catch(e) {
    var doc = new ActiveXObject('htmlfile'); 
    doc.open();
    doc.write(data);
    doc.close();
    contents = $(doc.documentElement);
  }
}

此时我们可以使用 jQuery 查找元素。将它们转移到不同的 DOM 会产生一些问题。有几种方法可以做到这一点，但它们尚未得到广泛支持（importNode 和采用节点）和/或有问题。鉴于我们的选择器字符串称为“选择器”，下面我重新创建找到的元素并将它们附加到“.someDiv”。

var fnd = contents.find(selector);
if(fnd.length) {
  var newSelection = $('');
  fnd.each(function() {
    var n       = document.createElement(this.tagName);
    var attr    = $(this).prop('attributes');
    n.innerHTML = this.innerHTML;
    $.each(attr,function() { $(n).attr(this.name, this.value); });
    newSelection.push(n);
  });
  $('.someDiv').append(newSelection);
};

【讨论】：