没有排除元素的DOM遍历

Question

我正在创建一个简单的脚本，该脚本遍历DOM并返回带有DOM中找到的元素的树对象。递归遍历本身非常简单，但我希望/需要跳过某些元素，并包括其他元素。我该怎么做？

这是我的HTML：

<div data-element="from-here">
  <div>skip me</div>
  <div>
    <div data-element="awesome">awesome text</div>
    <div data-element="collect-me">
      awesome text
      <div data-element="also-me">
        other text
        <div class="but-not-me">...</div>
      </div>
    </div>
  </div>
</div>

以及我的递归遍历代码：

const root = document.querySelector('[data-element="from-here"]');

function traverse(node) {
  return {
    element: node.dataset.element,
    children: Array.from(node.querySelectorAll(':scope > div')).map(childNode => traverse(childNode)),
  };
}

traverse(root);

您可以看到代码查询了所有div元素，但我只需要具有data-element属性的元素。我不能只做`node.querySelectorAll（'：scope> [data-element]'），因为那不会超过第一个div。

这是我想要的结果：

{
  element: 'from-here',
  children: [
    {
      element: 'awesome',
      children: [],
    },
    {
      element: 'collect-me',
      children: [
        {
          element: 'also-me',
          children: [],
        }
      ]
    }
  ]
}

任何帮助将不胜感激！

Answer 1

您可以使用Array.filter()过滤掉没有data-element属性的元素。

但是为了包括包装div，您可能还需要添加data-element属性，如下所示。

const root = document.querySelector('[data-element="from-here"]');

function traverse(node) {
  return {
    element: node.dataset.element,
    children: Array.from(node.querySelectorAll(':scope > div')).filter(child => child.dataset.element).map(childNode => traverse(childNode)),
  };
}

console.log(traverse(root));

<div data-element="from-here">
  <div>skip me</div>
  <div data-element="wrapper">
    <div data-element="awesome">awesome text</div>
    <div data-element="collect-me">
      awesome text
      <div data-element="also-me">
        other text
        <div class="but-not-me">...</div>
      </div>
    </div>
  </div>
</div>