Question

因此，我正在尝试使用Javascript Treewalker在HTML页面上选择所有的“ TEXT NODES”。基本上，我想将“整个”网页上所有“元音”的颜色更改为红色。也就是说页面上的“ a，e，i，o，u”应该是红色。

我使用标准过程创建了一个Treewalker对象，以仅过滤TEXT NODES。

这是我的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

此代码应循环显示所有文本节点，并用span标记替换其中的'e'。

它确实会在更改

中的“ e”后停止

<h1>TREEWALKER</h1>

仅标记。它不止于此。我不明白为什么。

使用Javascript Treewalker问题处理DOM文本节点

0 个答案: