Как найти весь текст и его родителя внутри элемента DOM - PullRequest
Новая
       40

Как найти весь текст и его родителя внутри элемента DOM

0 голосов
/ 07 января 2019

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

<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 работает по-другому.

1 Ответ

0 голосов
/ 07 января 2019

Рекурсивным подходом для этого (на основе вашей первоначальной попытки) будет проверка 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>
...