使用纯javascript获取body标签中的所有元素答案

【问题标题】：Get all elements in the body tag using pure javascript使用纯javascript获取body标签中的所有元素
【发布时间】：2012-10-01 03:44:14
【问题描述】：

我正在尝试使用纯 javascript 在数组中获取 HTML 页面的 Body 标记内的所有元素（标记）。我的意思是不使用任何框架（例如 JQuery）。

我发现您可以使用document.all，但这将返回整个文档中的所有元素，包括脚本。

反正我可以得到这些标签吗？

【问题讨论】：

【解决方案1】：

如果你想要 body 标签内的所有元素，而不仅仅是一级子元素，你可以简单地使用带有通配符的getElementsByTagName()：

var elems = document.body.getElementsByTagName("*");

【讨论】：

不知什么原因，它返回一个空值
@kkDev - 如果您在文档加载后调用它（因此当 DOM 存在时），它可以工作。有关工作演示，请参阅 jsfiddle.net/jfriend00/kKk3X。
由于某种原因，我得到了空对象，即使使用window.onload。

【解决方案2】：

您可以为此使用document.querySelectorAll()。

如果你真的想要所有（包括嵌套标签），使用这个

 var elements = document.querySelectorAll( 'body *' );

如果您只想要直接子节点，请使用

 var elements = document.querySelectorAll( 'body > *' );

【讨论】：

document.body.getElementsByTagName('*') 可能性能更高。
@RobW：……以及更多的跨浏览器兼容
user1689607 发布了一个建议 .children 的答案（出于某种原因，他删除了它）。我更喜欢 .children 属性而不是这个答案中建议的方法，因为它更简洁和更明显（.children 与 QSA / getElementsByTagName("*"). And, after all, the children` 属性存在，因为它应该在以下情况下使用一个是寻找子 elements （.children 不包括文本节点等（但它包括
需要注意的是querySelectorAll()和getElementsByTagName()有一个不同的返回类型。 querySelectorAll 返回 NodeList，而 getElementsByTagName 返回 HTMLCollection。更多关于两者之间的区别：Difference between HTMLCollection, NodeLists, and arrays of objects