<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" da

<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="au

DOM2JSON about js-challenges HOT 3 OPEN

sunny-117 commented on August 15, 2024

DOM2JSON

from js-challenges.

Comments (3)

mengqiuleo commented on August 15, 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">
    <p class="p">hello world</p>
    <div class="person">
      <span class="name">DOM2JSON</span>
      <span class="age">100</span>
    </div>
  </div>

  <script>
    function DOM2JSON(domTree){
      if(!domTree) return;
      let rootObj = {
        tagName: domTree.tagName,
        children: []
      }

      const children = domTree.children
      if(children){
        Array.from(children).forEach((element, i) => {
          rootObj.children[i] = DOM2JSON(element)
        })
      }
      return rootObj
    }

    console.log(DOM2JSON(document.querySelector('.box')))
  </script>
</body>
</html>

from js-challenges.

kangkang123269 commented on August 15, 2024

function DOMtoJSON(node) {
  const obj = {
    tag: node.tagName.toLowerCase(),
    children: [],
  };
  for (let i = 0; i < node.children.length; i++) {
    obj.children.push(DOMtoJSON(node.children[i]));
  }
  return obj;
}

from js-challenges.

bearki99 commented on August 15, 2024

function dom2json(domtree) {
  let obj = {};
  obj.tag = domtree.tagName.toLowerCase();
  obj.children = [];
  domtree.children.forEach((item) => {
    obj.children.push(dom2json(item));
  });
  return obj;
}