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

Kai*_*see 35 html javascript

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

我发现你可以使用document.all但会返回整个文档中的所有元素,包括脚本.

无论如何我能得到那些标签吗?

谢谢

jfr*_*d00 72

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

var elems = document.body.getElementsByTagName("*");
Run Code Online (Sandbox Code Playgroud)

  • @kkDev - 如果你在文档加载后调用它(因此当DOM存在时),它就可以工作了.有关工作演示,请参见http://jsfiddle.net/jfriend00/kKk3X/. (3认同)

Sir*_*rko 23

你可以用document.querySelectorAll()它.

如果你真的想要所有(包括嵌套标签),请使用它

 var elements = document.querySelectorAll( 'body *' );
Run Code Online (Sandbox Code Playgroud)

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

 var elements = document.querySelectorAll( 'body > *' );
Run Code Online (Sandbox Code Playgroud)

  • `document.body.getElementsByTagName('*')`可能更高效. (6认同)
  • 应该注意的是,“querySelectorAll()”和“getElementsByTagName()”具有*不同的返回类型*。`querySelectorAll` 返回一个 [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList),而 `getElementsByTagName` 返回一个 [`HTMLCollection`](https:// developer.mozilla.org/en-US/docs/Web/API/HTMLCollection)。有关两者之间差异的更多信息,请参见:[HTMLCollection、NodeLists 和对象数组之间的差异](/sf/ask/1103435091/) (4认同)
  • @RobW:……以及更多的跨浏览器兼容 (2认同)
  • user1689607 发布了一个答案,建议 **`.children`** (由于某种原因,他删除了它)。与此答案中建议的方法相比,我更喜欢 `.children` 属性,因为它更简洁、更明显(`.children` 与 QSA / getElementsByTagName("*")` 相反。毕竟,`children` 属性存在是因为它应该在寻找子 **元素** 时使用([`.children`](https://developer.mozilla.org/en-US/docs/DOM/Element.children) 排除文本节点等(但它包括<=IE8(bug)中的注释节点)。(Bergi 是对的,从 IE 8 开始就支持 QSA)。 (2认同)