获取 JavaScript 中元素的每个子元素的每个子元素答案

【问题标题】：Get every childs of every childs of an element in JavaScript获取 JavaScript 中元素的每个子元素的每个子元素
【发布时间】：2019-03-21 18:35:09
【问题描述】：

假设我有一个元素document.createElement("div")，我们称之为myDivmyDiv.innerHTML = "<div><p></p></div>"，现在myDiv 有一个孩子：div。而这个div 有一个孩子，一个p。我知道我可以使用myDiv.childNodes 获得myDiv 的孩子，使用myDiv.childNodes[0].childNodes 获得div 的孩子。但是现在我怎样才能得到每一个孩子的每一个孩子，就像存在的每一个孩子一样？示例：

myDiv.innerHTML = "<div><p></p><i></i></div></p></p>"
myDiv.someMethod((childs) => {
   // childs should return the `div`, the `div`'s childs (`p` & `i`) and `p` 
})

【问题讨论】：

你不需要知道哪些是孩子，哪些是孙子，更不用说他们是谁的孙子了？希望所有这些节点以什么形式返回？
全部在一个数组中，即使有些是孩子，有些是孙辈。
使用 querySelectorAll 怎么样？ const childArray = Array.prototype.slice.call(myDiv.querySelectorAll('*'))

标签： javascript html children

【解决方案1】：

你可以使用Element.querySelectorAll

let div = document.createElement('div');
div.innerHTML = `<div><p></p><i></i></div><p></p>`;

console.log([...div.querySelectorAll('*')])

【讨论】：