<div id="parent1">
<div id="child1">
</div>
<div id="child2">
</div>
<div id="child3">
</div>
<p id="hehe_ignore"> completely ignore </p>
<div id="parent2">
<p> completely ignore </p>
<div id="child4">
<p id="hehe_ignore2"> completely ignore </p>
</div>
<div id="child5">
</div>
<div id="child6">
</div>
</div>
</div>
[
{parent1: [
{child1: []},
{child2: []},
{child3: []},
{parent2: [
{child4: []},
{child5: []},
{child6: []},
]}
]}
];
在香草js中最快和最好的方法是什么？
基于your fiddle中HTML标记的解决方案（not当前在您的问题中看到的HTML标记）：
const buildTree = node => {
if (!node.childNodes) {
return [];
}
const childrenWithIDs = [];
[...node.childNodes].forEach(childNode => {
if (childNode.id) {
childrenWithIDs.push({
[childNode.id]: buildTree(childNode)
})
}
});
return childrenWithIDs;
}
const rootEl = document.getElementById("parent1").parentNode;
const result = buildTree(rootEl);
console.log(result);
尚不清楚您明确要忽略的内容，因此我只是忽略了不包含id的任何节点，但是您始终可以修改条件以检查您想要的内容。
我在小提琴中对代码所做的唯一更改是从#parent1的父节点开始该过程。在直接使用#parent1启动过程时，可能有可能获得相同的结果，但是从节点的父节点开始似乎更简单。
我认为应该没问题，因为每个节点，甚至<html>标记都将始终有一个父节点（只要您定位parentNode，而不是parentElement，因为后者会返回[ null标签的<html>）。