HTML DOM TreeWalker 过滤器属性

HTML DOM TreeWalker是一种用于遍历DOM树的API，可以通过指定过滤器属性来过滤遍历的节点。这些过滤器属性可以帮助程序员更加精确地遍历DOM树或节点。

属性列表

以下是HTML DOM TreeWalker过滤器属性的列表:

NodeFilter.acceptNode

• 类型: Function(node)
• 描述: 判断节点是否应该被包括在遍历中。
• 返回值: NodeFilter.FILTER_ACCEPT或NodeFilter.FILTER_SKIP或NodeFilter.FILTER_REJECT。

NodeFilter.acceptNode方法是一种用于处理遍历节点是否包含在遍历范围内的回调方法。返回值是一个NodeFilter.FILTER_ACCEPT、NodeFilter.FILTER_SKIP或NodeFilter.FILTER_REJECT常量，以指示节点是否应该包含在遍历中。

const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ALL,
  {acceptNode: (node) => node.nodeType === Node.ELEMENT_NODE ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP}
);

在上述例子中，只有元素节点才会被包含在遍历范围内，其他类型的节点将被跳过。

NodeFilter.showType

• 类型: Number
• 描述: 指定要包括的节点类型。
• 默认值: NodeFilter.SHOW_ALL

NodeFilter.showType属性用于指定要包括在遍历中的节点类型。默认情况下，这个属性设置为NodeFilter.SHOW_ALL，即包括所有类型的节点。你可以将它设置为其他节点类型的参数，例如NodeFilter.SHOW_ELEMENT，代表只包括元素节点。

const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
);

在上述例子中，只有元素节点会被包含在遍历中，其他类型的节点将被跳过。

NodeFilter.show:

• 类型: Number
• 描述: 指定要包括的节点类型。
• 默认值: NodeFilter.SHOW_ALL

NodeFilter.show属性被用于替代NodeFilter.showType属性(因为它存在兼容性问题)。它接受一个用以表示各种节点类型的数字，例如NodeFilter.SHOW_ELEMENT代表元素节点。

const walker = document.createTreeWalker(
  document.body,
  {
    show: NodeFilter.SHOW_ELEMENT,
  }
);

在上述例子中，只有元素节点会被包含在遍历中，其他类型的节点将被跳过。

NodeFilter.whatToShow

• 类型: Number
• 描述: 指定要包括的节点类型以及订阅节点属性的变化。
• 默认值: NodeFilter.SHOW_ALL

NodeFilter.whatToShow属性用于指定要包含在遍历中的节点类型以及需要订阅的节点属性变化。它接受一个数字来表示节点类型，要订阅的属性也可以与其条件一起出现。例如，如果要包括元素节点和TEXT_NODE，并且还要订阅“nodevalue”属性的更改，则可编写以下代码:

const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
  {
    acceptNode: function(node) {
      if (node.nodeType === Node.ELEMENT_NODE ||
          (node.nodeType === Node.TEXT_NODE && node.nodeValue.length > 0)) {
        return NodeFilter.FILTER_ACCEPT;
      } else {
        return NodeFilter.FILTER_REJECT;
      }
    }
  }
);

在上述例子中，NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT表示只包括元素节点和文本节点，在acceptNode回调函数中，我们检查了节点类型以及“nodevalue”属性的更改。

总结

HTML DOM TreeWalker过滤器属性可以帮助程序员更好地遍历DOM树或节点。NodeFilter.acceptNode方法用于处理遍历节点是否包含在遍历范围内的回调方法。NodeFilter.showType和NodeFilter.show属性用于指定要包括的节点类型。NodeFilter.whatToShow属性不仅可以指定包括的节点类型，还可以指定要订阅的属性变化。