Question

我找不到一种方法来获取仅包含制表符的节点兄弟姐妹，因此我可以将其丢弃并仅获取文本和他的父母。

<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。我只需要查找文本和他的父母。

innerText上的

顺便说一句，只给我提供没有制表符的文本，但是我发现chrome的工作原理与众不同。

Answer 1

一种递归方法（基于您的原始尝试）将是在遍历后代时检查nodeType是否等于Node.TEXT_NODE类型，当您找到文本时，则可以使用trim()来检查non-empty文本是否存在，在这种情况下，您可以获取父文本和相关文本。如以下示例所示：

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元素中查找所有文本及其父级

1 个答案: