Рекурсивный поиск по DOM, чтобы убрать innerText

Question

Мне нужен рекурсивный поиск по иерархии DIV и получение innerText.Я могу идентифицировать родителя только по идентификатору, но это единственная единая информация.Я знаю, что в дочерних элементах этого элемента есть div с текстом.Какой лучший способ сделать это рекурсивно для всех детей и детей?

Вот журнал того, что я получаю:

Found text: .rLshyf,.BmP5tf{padding-top:56px;padding-bottom:56px}
Found text: .w1C3Le,.BmP5tf,.G5NbBd{padding-left:112px;padding-right:112px;}
Found text: .G5NbBd{padding-bottom:56px}
Found text: .ROYx{display:flex;justify-content:space-between}
Found text: .SkmBxc{width:988px;margin-right:68px}
Found text: .EURV7d{font-weight:500;margin-top:-8px}
Found text: .j8epzd{height:192px;margin-top:16px}
Found text: .UYT3jb{width:100%;height:2px;margin-top:24px;margin-bottom:24px;background-color:#303030}
Found text: .z24g9c{margin-top:32px}
Found text: .GsVE9b{float:right}
Found text: .MUxGbd{font-size:28px;font-family:Roboto,sans-serif;line-height:40px;padding-top:2px;margin-bottom:-2px}
Found text: .MUxGbd.ITUZi{font-size:40px;line-height:48px}
Found text: .lyLwlc{color:#202124}
Found text: .aLF0Z{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
Found text: .MUxGbd.v0nnCb{font-size:32px;line-height:48px;padding-top:6px;margin-bottom:-6px;}
Found text: .lEBKkf{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
Found text: .L6lOSd{color:rgba(255,255,255,.5) !important}
Found text: .L6lOSd svg{fill:rgba(255,255,255,.5);height:24px;width:24px;vertical-align:middle;margin-left:8px}
Found text: .L6lOSd:hover{background-color:#303030;color:rgba(255,255,255,1) !important}
Found text: .L6lOSd:hover svg{fill:rgba(255,255,255,1)}
Found text: .L6lOSd:focus{background-color:#303030;color:rgba(255,255,255,1) !important}
Found text: .L6lOSd:focus svg{fill:rgba(255,255,255,1)}
Found text: .MUxGbd.gbj1yb{font-size:24px;line-height:32px;padding-top:0px;margin-bottom:-8px}
Found text: .WZ8Tjf{color:#70757A}
Found text: .WZ8Tjf a:visited{color:#acacac}
Found text: Is iPhone 8 waterproof?
Found text: The iPhone 8 and 8 Plus is not waterproof — no smartphone is. However, as you stated yourself, they do have an IP67 rating for dust and water-resistance.
Found text: Source: damage - Does the iPhone 8 have any sort of water resistance or ...
Found text: window.onUrlClick=function(a){var b=a.getAttribute("data-url");a=a.getAttribute("data-follow-up-query");b?window.parent.postMessage({url:{href:b}},"*"):a&&window.parent.postMessage({query:{queryText:a}},"*")};
Found text: const ENTER_KEYCODE = 13;const ENTER = 'Enter';

Я не понимаю, почему яполучить весь внутренний стиль текста.Как я могу просто получить отображаемый текстовый контент?

Answer 1

Лучший способ справиться с рекурсией - создать рекурсивную функцию, поэтому вот как вы можете сделать это из родительского элемента в дереве.

function recurseEl(element) {
  if(element.childElementCount === 0) {
    element.textContent = '';
  } else {
    Array.from(element.children).forEach(child => {
      recurseEl(child);
    });
  }
}

function removeInnerText(elements) {
  recurseEl(element);
}

// Usage
const parentElement = document.getElementById('parent');
removeInnerText(parentElement);

Это делегирует ту же рекурсивную функцию вниз по дереву, если в дереве все еще есть дочерний узел.Когда он попадает на лист в дереве, он запускает функцию замены.

Answer 2

Если вы хотите записать содержимое текстовых узлов:

function logInnerText(elem) {
  if (elem.nodeType === Node.TEXT_NODE && elem.nodeValue.trim())
    console.log(elem.parentNode.nodeName + ' contains ' + elem.nodeValue.trim())
  elem.childNodes.length && elem.childNodes.forEach(el => logInnerText(el))
}

logInnerText(document.getElementById('someId'))

Answer 3

Вот как удалить все текстовые узлы в элементе:

function removeTextNodes(element){
    let i = 0;
    while (i<element.childNodes.length){
        let node = element.childNodes[i];
        if (node.nodeType==3){
            element.removeChild(node);
        }else if(node.nodeType==1){
            removeTextNodes(node);
            i++;
        }
    }
}