javascript递归以获取innerText

Question

我想学习没有选择器的递归，我有div：

<div>
<div>
<div>car</div>
</div>
<div>
<div>bus</div>
</div>
<div>
<div>train</div>
</div>

如何在没有选择器(标记名..等(的情况下遍历DOM，以提取这3个div的innerText，从而将它们推入数组。注意，我需要选择没有任何子元素的div。

我使用了document.body.childNodes和之后的许多if语句来检查是否有childNodes。我做了，但这是一长串代码。我看到它可以用递归函数来完成，所以任何帮助都将是惊人的。

谢谢！

Answer 1

下面是一个开始的示例：

function getText(node, accumulator) {
if (node.nodeType === 3) // 3 == text node
accumulator.push(node.nodeValue)
else
for (let child of node.childNodes)
getText(child, accumulator)
}
//
allTexts = []
getText(document.querySelector('#start'), allTexts)
console.log(allTexts)

<div id="start">
<div>
<div>car</div>
</div>
<div>
<div>bus</div>
</div>
<div>
<div>train</div>
</div>
</div>

Answer 2

好吧，您想要实现的目标可以用一行代码轻松完成rootElement.innerText.split('n');

我知道你在找的是一个递归函数，但有时答案越简单越好。

如果你想开始了解递归函数，这里有一个基本的factorial算法

function factorial(number) {
if (number === 0) return 1;
return number * factorial(number - 1);
}
console.log(factorial(5));

const root = document.getElementById('root');
const myList = root.innerText.split('n');
console.log(myList);

<div id="root">
<div>
<div>car</div>
</div>
<div>
<div>bus</div>
<div>bike</div>
</div>
<div>
<div>
<div>taxi</div>
<div>
<div>subway</div>
</div>
</div>
<div>train</div>
</div>
</div>