获取innerHtml或innerText或nodeValue并排除嵌套子级？

Question

I'm trying to save my DOM into some JSON format and one key in the tree is content . This code works 'fine', but only for simple cases. I'm using now nodeValue to grab the text only from the first child, and it gives me good results, but it's breaking when the structure contains elements like br .

const uploadDom = (node, path, siblingsLeft, order) => {
  for (let item of node) {
    order = order + 1;
    database.ref("dom/" + path + "/" + order).update({
      id: item.id,
      type: item.tagName,
      class: item.className,
      content: item.childNodes[0].nodeValue
    });
    if (item.children.length) {
      siblingsLeft = item.children.length - 1;
      path = path + order + `/`;
      uploadDom(item.children, path, siblingsLeft, order);
    }
    if (siblingsLeft > 1) {
      a = order + "/";
      path = path.replace(a, "");
      siblingsLeft = 1;
    }
  }
};

Here is example HTML structure: (please note this structure is always dynamic)

<div id="wrapper">
<!-- wrapper has no text content so I want content value of null -->
   <p>I want to save this text as content value of P tag</p>
   <div class="wrapper-2">
   <!-- wrapper has no text content so I want content value of null -->
      <p>This P contains <br> new line element</p>
      <!-- I'm using nodeValue of first child so content will be = 'This P contains' -->
      <!-- content should be = 'This P contains <br> new line element' -->
      <p>I want to save this text as content value of P tag</p>
   </div>
</div>

I'm trying to figure out smarter way to save my DOM tree, although I'm struggling with the way I can save text content as in the example above.

Answer 1

You can save your DOM tree into valid json as follows

 let json = JSON.stringify(wrapper.innerHTML) console.log(JSON.parse(json)); 

 <div id="wrapper"> <!-- wrapper has no text content so I want content value of null --> <p>I want to save this text as content value of P tag</p> <div class="wrapper-2"> <!-- wrapper has no text content so I want content value of null --> <p>This P contains <br> new line element</p> <!-- I'm using nodeValue of first child so content will be = 'This P contains' --> <!-- content should be = 'This P contains <br> new line element' --> <p>I want to save this text as content value of P tag</p> </div> </div>