Javascript：从下往上遍历给定的元素树处理元素

问题描述 投票：0回答：1

这把我难住了。我有一个 

<div>
说法，它包含一个元素树、子元素、子元素、子元素等等。我想从下到上处理所有这些元素。除非它的所有子元素都已被处理，否则永远不会处理给定的元素。

显然，

<div>
下面有任意数量的叶子，我们需要从每个叶子向上走，但永远不要经过具有未处理的子节点的节点。

我想知道在我付出太多之前这是否是一个解决问题的方法。我的直觉是，在形式上，算法是分成几个部分的：

  1. 枚举所有叶子（树中的死端元素）
  2. 沿着每个分支走到第一个路口
  3. 枚举已处理所有子项的所有结点
  4. 沿着树枝走到下一个路口 等等等等

我可以感觉到那里的一种模式，它随时枚举已完全处理的节点（没有未处理的子节点），逐一向上走到下一个节点，然后再次枚举直到到达顶部。建议采用递归方法，直到未处理节点的枚举长度为零。

听起来很可行，但对枚举没有未处理子节点的节点的最有效方法有点困惑。正如我所说，如果问题得到解决并且有一个使用本机 Javascript 的标准解决方案，我会热衷于利用它。

javascript dom
1个回答
0
投票

嗯，您可以使用简单的递归方法，仅在将 lambda 

func
应用于元素 
e
的所有子元素之后才应用它。该解决方案清楚地处理其子元素之后的元素。

traverse(document.body, (e) => console.log(e))

function traverse(e, func) {
    Array.from(e.children).forEach(child => {
        traverse(child, func)
    });
    func(e)
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <h1>Example</h1>
    <button>Some button</button>
    <pre>
        <code><span>inner span</span> some code</code>
        <span>span</span>
    </pre>
    <script type="module" src="js/dom-traverse.js"></script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.