通过createHTMLDocument创建的对象调用getElementsByClassName失效如何解决

document.implementation.createHTMLDocument返回的是完整的HTML Document对象，而非普通DOM元素：innerHTML是元素节点专属属性，直接给Document对象赋值innerHTML不会生效，你要插入的内容根本没有被写入到虚拟文档结构中，因此后续调用getElementsByClassName无法匹配到对应节点，返回的集合长度始终为0。

只需要将内容写入虚拟文档的body元素即可，修改2行代码：

1. 插入内容时改为写入虚拟文档的body
2. 最后提取结果时也从body中读取innerHTML

将原有代码：

copy.innerHTML = document.getElementById('test').innerHTML;
// 省略中间代码
var contentsTx = copy.innerHTML;

替换为：

copy.body.innerHTML = document.getElementById('test').innerHTML;
// 省略中间代码
var contentsTx = copy.body.innerHTML;

修正后的完整JS代码如下：

setTimeout(function() {
  console.log('Starting...');

  var copy = document.implementation.createHTMLDocument('virtual');
  // 改为向虚拟文档的body插入内容
  copy.body.innerHTML = document.getElementById('test').innerHTML;
  var r = copy.getElementsByClassName('removeOnSave');
  console.log('seen ' + r.length);
  for (var i = r.length - 1; i >= 0; i--) r[i].parentNode.removeChild(r[i]);
  // 改为从虚拟文档的body读取处理后的内容
  var contentsTx = copy.body.innerHTML;
  document.getElementById('output').value = contentsTx;

}, 1000);

内容的提问来源于stack exchange，提问作者abe1432181