IE9: DOM Traversal

Really interesting blog post by the IE
team on some of the new DOM traversal features in IE9 (and other browsers). 
Often times, you need to traverse the DOM to find a particular element or series of
elements.  In the past, you might need to write some recursive JavaScript functions
to navigate through the HTML on your page to act upon functions you care about.

Now, in IE9 (and other browsers that follow the W3C spec), you can use node iterators
to get a flat list of the elements that you actually care about.  For example:

  1: //This would work fine with createTreeWalker, as well
  2: var iter= document.createNodeIterator(elm, 
  3: NodeFilter.SHOW_ELEMENT, 
  4: null, 
  5: false); 
  6:  
  7: var node= iter.nextNode();
  8: while (node= iter.nextNode())
  9: {
  10: node.style.display= "none";
  11: }

The NodeFilter enum by default allows for the following values (from the w3c spec
here - https://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/traversal.html#Traversal-NodeFilter):

  1: const unsigned long SHOW_ALL= 0xFFFFFFFF;
  2: const unsigned long SHOW_ELEMENT= 0x00000001;
  3: const unsigned long SHOW_ATTRIBUTE= 0x00000002;
  4: const unsigned long SHOW_TEXT= 0x00000004;
  5: const unsigned long SHOW_CDATA_SECTION= 0x00000008;
  6: const unsigned long SHOW_ENTITY_REFERENCE= 0x00000010;
  7: const unsigned long SHOW_ENTITY= 0x00000020;
  8: const unsigned long SHOW_PROCESSING_INSTRUCTION= 0x00000040;
  9: const unsigned long SHOW_COMMENT= 0x00000080;
  10: const unsigned long SHOW_DOCUMENT= 0x00000100;
  11: const unsigned long SHOW_DOCUMENT_TYPE= 0x00000200;
  12: const unsigned long SHOW_DOCUMENT_FRAGMENT= 0x00000400;
  13: const unsigned long SHOW_NOTATION= 0x00000800;

While this is great – you can also write your own NodeFilter callback function to
filter the results even further:

  1: var iter= document.createNodeIterator(elm, 
  2: NodeFilter.SHOW_ALL, 
  3: keywordFilter, 
  4: false);
  5:  
  6: function keywordFilter(node)
  7: {
  8:  
  9: var altStr= node.getAttribute('alt').toLowerCase();
  10: 
  11: if (altStr.indexOf("flight")!= -1 || altStr.indexOf("space") !=-1)
  12: return NodeFilter.FILTER_ACCEPT;
  13: else
  14: return NodeFilter.FILTER_REJECT;
  15: }

Really nice and can help make your code simpler to read and faster too!

Enjoy!