Получить innerHtml или innerText или nodeValue и исключить вложенный дочерний элемент?

Question

Я пытаюсь сохранить DOM в некотором формате JSON, и один ключ в дереве - content. Этот код работает нормально, но только для простых случаев. Сейчас я использую nodeValue, чтобы получить текст только от первого потомка, и это дает мне хорошие результаты, но оно ломается, когда структура содержит элементы, такие как 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;
    }
  }
};

Вот пример структуры HTML: (обратите внимание, эта структура всегда динамическая)

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

Я пытаюсь найти более разумный способ сохранить дерево DOM, хотя я борюсь с тем, как сохранить текстовое содержимое, как в примере выше.

Answer 1

Вы можете сохранить дерево DOM в действительный json следующим образом

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>