Манипуляция текстовым узлом DOM с помощью Javascript Treewalker - PullRequest
Новая
       17

Манипуляция текстовым узлом DOM с помощью Javascript Treewalker

1 голос
/ 09 июля 2019

Так что я пытаюсь выбрать ВСЕ «ТЕКСТОВЫЕ УЗЛЫ» на странице HTML, используя Javascript Treewalker.В основном я хочу изменить цвет ВСЕХ гласных на веб-странице «ВСЕ» на красный.То есть «a, e, i, o, u» ВСЕГДА на странице должно быть красного цвета.

Я создал объект Treewalker со стандартной процедурой для фильтрации только ТЕКСТОВЫХ УЗЛОВ.

Вот мой HTML-код 

<body>
    <div class="main">
        <h1>TREEWALKER</h1>
        <p>Treewalker demo example. We'll see how Treewalker works in Javascript by creating one and filtering all DOM nodes which are Text Nodes.
        Then we'll replace all the vowels with red color.
        </p>
        <ul>
            <li>T</li>
            <li>R</li>
            <li>E</li>
            <li>E</li>
        </ul>
    </div>
    <script src="Treewalker.js"></script>
</body>

let body = document.body;

const treewalker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
    acceptNode: (node) => {
        return (node.nodeValue.trim() !== '') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
    }
});


while(treewalker.nextNode()) {
    treewalker.currentNode.textContent = treewalker.currentNode.textContent.replace(/e/gi, '<span>e</span>');
    treewalker.currentNode.parentElement.innerHTML = treewalker.currentNode.textContent
}

Моя проблема начинается здесь: 

while(treewalker.nextNode()) {
    treewalker.currentNode.textContent = treewalker.currentNode.textContent.replace(/e/gi, '<span style='color:red'>e</span>');
    treewalker.currentNode.parentElement.innerHTML = treewalker.currentNode.textContent

Этот код должен циклически проходить через ВСЕ ТЕКСТОВЫЕ УЗЛЫ и заменять 'e' внутри них на spanтег.

Это делает, НО ОСТАНАВЛИВАЕТСЯ ТОЛЬКО после изменения 'e' в теге 

<h1>TREEWALKER</h1>

.Это не выходит за рамки этого.Я не понял почему.

...