Home | About Me | Developer PFE Blog | Become a Developer PFE
Disclaimer The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.
Sign In
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 - http://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!