HTML DOM NodeIterator Filter

HTML DOM NodeIterator is a useful tool for traversing through an HTML document's nodes. It allows developers to select specific nodes based on certain criteria. One way to filter nodes is by using the Filter property of NodeIterator.

The Filter property is a function that takes a node as a parameter and returns a boolean value. If the value is true, the node is included in the iteration; if false, the node is skipped.

Here is an example of implementing the Filter property:

var container = document.getElementById("container");
var iter = document.createNodeIterator(container, NodeFilter.SHOW_ELEMENT, {
  acceptNode: function(node) {
    if (node.tagName.toLowerCase() === "div" &&
        node.className.indexOf("show") !== -1) {
      return NodeFilter.FILTER_ACCEPT;
    } else {
      return NodeFilter.FILTER_SKIP;
    }
  }
});

var node;
while(node = iter.nextNode()) {
  // Do something with the selected node
}

In this example, we create a NodeIterator called iter that selects all elements within the container element that have a tagName of "div" and a "show" class.

The acceptNode function is the filter that's used to determine which nodes to accept and which to skip. If the node meets the criteria, it returns the constant NodeFilter.FILTER_ACCEPT. If it doesn't meet the criteria, it returns NodeFilter.FILTER_SKIP.

The iteration process will skip all nodes that return FILTER_SKIP and include all nodes that return FILTER_ACCEPT.

Using the Filter property of NodeIterator can help developers easily extract specific nodes from an HTML document.