javascript - 如何将 document.body 的所有子级放入包装器中？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 8 年前。

Improve this question

我有一个 HTML 页面，其中包含一些不同的子页面。我希望主体仅成为单个包装元素的父元素，该元素将包含主体之前的所有子元素。我该如何去做呢？

Answer 1

您可以将 body 的所有子节点移动到一个新元素，然后将该元素附加到 body，例如

function wrapAll() {
  var el, div = document.createElement('div');
  while (el = document.body.firstChild) {
    div.appendChild(el);
  }
  document.body.appendChild(div);
}

页面加载后调用该函数:

window.onload = wrapAll;

如果您不关心 IE 8(您应该关心它，因为它仍然拥有大约 20% 的用户份额)，您可以使用更简洁的:

function wrapAll() {
  var div = document.createElement('div');
  [].slice.call(document.body.childNodes).forEach(function(node){div.appendChild(node)});
  document.body.appendChild(div);
}

但是我认为第一个对于兼容性和可维护性来说是更好的选择(而且可能更快)。

请注意，第二个在 IE 8 中不起作用的原因是它不允许将主机对象传递给内置方法，如 this，您无法使用 polyfill 修复该问题、垫片、猴子补丁或其他任何东西。

编辑

根据 Squint 的评论，如果没有需要考虑的文本节点，您还可以使用 querySelectorAll 跳过 slice 的使用:

var div = document.createElement('div');
div.id = 'foo';
[].forEach.call(document.body.querySelectorAll('*'), function(node){div.appendChild(node)});
document.body.appendChild(div);

并且由于 forEach 在 IE8 中需要一个垫片，因此将主机对象作为 this 传递就可以了。请注意，IE 8 仅部分支持 querySelector API，而 IE 7 则完全不支持。