如何在 DOM 元素中找到所有文本和他的 parent

Question

我找不到获取仅包含选项卡的节点兄弟节点的方法，因此我可以丢弃它们并仅获取文本和他的 parents。

<html>
<head><title>My page</title></head>
<body>

  <div id="container">
    <div id="subject">
      <div> divText <span>
        <a> aText </a>
        spanText </span>
      </div>
    </div>
  </div>

  <script>

    var subject = document.getElementById('subject');

    function printInnerText(ele)
    {
        var childrens = ele.childNodes;

        if (childrens.length > 1)
        {
            for (var i = 0; i < childrens.length; i++)
            {
                printInnerText(childrens[i]);
            }
        }
        else
        {
            console.log(ele.innerText);
        }
    }

    printInnerText(subject);

  </script>
</body>
</html>

如果“#text”包含 textContent（和 wholeText）作为 enter 或 tabs，我只需要移至下一个 node.nextSibling。我只需要找到文本和他的 parents.

BTW on ie innerText 只给我没有制表符的文本，但我发现 chrome 的工作方式不同。

Answer 1

执行此操作的递归方法（基于您最初的尝试）将检查 nodeType equal to type Node.TEXT_NODE while you are traversing the descendants, when you found a text, then you can use trim() 以检查是否存在 non-empty 文本，在这种特殊情况下，您可以获得parent 和相关文本。如下一个示例所示：

var subject = document.getElementById('subject');

function clasifyTextByWrapper(ele)
{
    if (ele.nodeType === Node.TEXT_NODE && ele.nodeValue.trim())
        console.log(ele.parentNode.nodeName + " contains text: " + ele.nodeValue.trim());

    ele.childNodes.length && ele.childNodes.forEach(e => clasifyTextByWrapper(e));
}

clasifyTextByWrapper(subject);

<div id="container">
  <div id="subject">
    <div> divText <span>
      <a> aText </a>
        spanText </span>
    </div>
  </div>
</div>

如何在 DOM 元素中找到所有文本和他的 parent

How to find all text and his parent inside a DOM element

javascript

algorithm

dom-traversal