javascript - TreeWalker 显示不可见节点

Question

我有一个带有 display: none 的 div 的 dom 树:

<div id="root">
    1
    <div style="display: none;">
        2
    </div>
    3
</div>

我使用 TreeWalker 遍历这个 dom 树:

let element = document.getElementById('root');
let walker = document.createTreeWalker(element, NodeFilter.SHOW_ALL);

while (walker.nextNode()) {
    let node = walker.currentNode;
    if (node.nodeType === 3) {
        console.log(node.nodeValue.trim());
    }
}

来自 MDN documentation to TreeWalker.nextNode() method :

The TreeWalker.nextNode() method moves the current Node to the next visible node in the document order ...

所以，我认为 display: none 的 div 应该被 TreeWalker 跳过。但它不是:

let element = document.getElementById('root');
let walker = document.createTreeWalker(element, NodeFilter.SHOW_ALL);

while (walker.nextNode()) {
    let node = walker.currentNode;
    if (node.nodeType === 3) {
        console.log(node.nodeValue.trim());
    }
}

<div id="root">
    1
    <div style="display: none;">
        this text node shouldn't be obtained with TreeWalker
    </div>
    3
</div>

那么，为什么它没有被跳过？

Answer 1

因为在这种情况下可见项不属于

visible in dom

相反它属于

• 适合TreeWalker.whatToShow掩码和
• 被TreeWalker.filter接受