Javascript 将html元素映射到json对象

我有这样一个html元素

<div 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>

---

在javascript中有这样做的方法吗？

您可以使用

然后递归地遍历父级并得到子树

但请注意，不能用同一个键指定两个值。因此，在指定子树时可以使用索引，如

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

希望下面的片段能给你一个线索

const parent=document.getElementById（'parent'））
常量树={}；
常量getTree=（elem）=>{
常量子树={}；
为了（让孩子成为元素的孩子）{
子树[child.tagName.toLowerCase（）]=getTree（child）
}
返回子树；
}
树[parent.tagName.toLowerCase（）]=getTree（父）；
控制台日志（树）

650卢比
1500卢比
-57%
构建json的递归函数。为确保键（可能重复）没有问题，添加了以下内容
：n
，其中
n
是元素的索引


函数HTMLTObject（targetElement）{
返回数组
.from（targetElement.children）
.减少（（acc、cur、i）=>{
acc[`${cur.tagName}:${i}`.toLowerCase（）]=HTMLTObObject（cur）；
返回acc；
}, {});
}
const startElement=document.getElementsByClassName（“myparent”）[0]；
常数res={
[startElement.tagName.toLowerCase（）]：HTMLObject（startElement）
};
控制台日志（res）

650卢比
1500卢比
-57%
在一般情况下必然会失败，考虑到具有相同父级的SUN、DIV、SPAN。您使用json中的object（而不是array）来表示它们的事实只允许您存储两个键（span，div）。请检查您真的希望有重复的键，还是希望子项作为数组？
  "div": {
     "span_1": {},
     "span_2": {},
  }