HTML DOM NodeIterator whatToShow 属性介绍

在 HTML DOM API 中，NodeIterator whatToShow 属性用于设置要显示哪些节点类型。该属性是一个数字值，由以下常量组成：

• NodeFilter.SHOW_ALL：显示所有类型的节点（默认值）。
• NodeFilter.SHOW_ELEMENT：仅显示元素节点。
• NodeFilter.SHOW_ATTRIBUTE：仅显示属性节点。
• NodeFilter.SHOW_TEXT：仅显示文本节点。
• NodeFilter.SHOW_CDATA_SECTION：仅显示 CDATASection 节点。
• NodeFilte.SHOW_ENTITY_REFERENCE：仅显示实体引用节点。
• NodeFilter.SHOW_ENTITY：仅显示实体节点。
• NodeFilter.SHOW_PROCESSING_INSTRUCTION：仅显示处理指令节点。
• NodeFilter.SHOW_COMMENT：仅显示注释节点。
• NodeFilter.SHOW_DOCUMENT：仅显示文档节点。
• NodeFilter.SHOW_DOCUMENT_TYPE：仅显示文档类型节点。
• NodeFilter.SHOW_DOCUMENT_FRAGMENT：仅显示文档片段节点。
• NodeFilter.SHOW_NOTATION：仅显示记号节点。

语法

NodeIterator.whatToShow = type;

其中，type 是一个数字值，代表要显示的节点类型。

示例

以下是一个简单示例，演示如何使用 NodeIterator whatToShow 属性：

// 获取 div 元素及其所有子节点
var div = document.getElementById("demo");
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ALL);

// 获取所有元素节点
var elements = [];
var node = iterator.nextNode();
while (node) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    elements.push(node);
  }
  node = iterator.nextNode();
}

在上述示例中，我们首先获取了一个 id 为 "demo" 的 div 元素，然后使用 document.createNodeIterator() 方法创建了一个新的 NodeIterator 对象。该对象会遍历 div 元素及其所有子节点，因为我们在第二个参数中传入了 NodeFilter.SHOW_ALL 常量（即显示所有类型的节点）。

然后，我们定义了一个 elements 数组，用于存储所有的元素节点。我们通过不断调用 NodeIterator 对象的 nextNode() 方法，直到遍历完所有的节点为止。在遍历的过程中，我们对当前节点的类型进行了判断，如果它是元素节点，就将其添加到 elements 数组中。

注意，在实际的开发中，我们可能只需要获取某一种节点类型（比如只获取文本节点或者只获取元素节点）。此时，我们可以相应地设置 NodeIterator whatToShow 属性的值，以提高代码的性能和效率。

参考文献

• MDN web docs - NodeIterator.whatToShow