javascript - 将 html 元素映射到 json 对象

Question

<分区>

Answer 1

您可以使用 HTMLElement 的 children 属性

然后递归遍历父节点并得到子树。

但请注意，您不能使用相同的键分配两个值。因此，您可以在分配子树时使用索引，如

  "div": {
     "span_1": {},
     "span_2": {},
  }

希望下面的代码片段能给您一些线索。

const parent = document.getElementById('parent')

const tree = {};


const getTree = (elem) => {
   const subtree = {};
   for(let child of elem.children){
       subtree[child.tagName.toLowerCase()] = getTree(child)
   }
   return subtree;
}

tree[parent.tagName.toLowerCase()] = getTree(parent);

console.log(tree);

<div id="parent" class='myparent'>
  <div>
    <div class="pdp-product-price">
      <span> 650 rupees</span>
      <div class="origin-block">
        <span> 1,500 rupees</span>
        <span>-57%</span>
      </div>
    </div>
  </div>
</div>