通过DOM递归搜索去掉innerText

Posted 2021-03-29

我需要递归搜索DIV层次结构并获取innerText。我只能通过ID识别父母，但这是唯一一致的信息。我知道在那个元素的子元素中有一个带有文本的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';

我不明白为什么我要获得所有内部样式文本。我怎样才能抓住可显示的文字内容？

答案

处理递归的最佳方法是创建一个递归函数，所以这里是你如何从树中的父进行处理它。

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

另一答案

以下是删除元素中所有文本节点的方法：

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++;
        }
    }
}

另一答案

如果您的目的是记录文本节点的内容：

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

以上是关于通过DOM递归搜索去掉innerText的主要内容，如果未能解决你的问题，请参考以下文章

同步代码中dom操作不生效的问题

jquery基本操作

DOM操作总结

JavaScript 学习-33.HTML DOM 获取和修改文本节点( textContent，innerText 和 innerHTML)

JS的dom获取innerHtml和innerText的区别

浏览器兼容问题innerText nextElementSibling firstElementChild