Implementing the ElementTraversal Interface

Quite a lot of browsers (Opera 9.6, Google Chrome 2, Safari 4, Firefox 3.5) have got support for the very convenient ElementTraversal interface, which allows you to navigate the DOM tree, ignoring text nodes. In these browsers, the following set of new getters is available for each element:

firstElementChild is the first child;
lastElementChild - the last child element;
nextElementSibling - the next neighboring element;
previousElementSibling - previous neighboring element;
childElementCount - the number of children.

Without going into details of the implementation of these getters and relying on the words from the specification:

The ElementTraversal interface is a set of read-only attributes ...

we will call them further attributes.

Let's clarify: the elements are called DOM-tree nodes that have the nodeType property equal to 1; elements correspond tags.

The use of these attributes should improve the performance of JavaScript applications when navigating the DOM tree, since there is no need to check nodeType nodes in the loop and use additional wrapper functions. And the childElementCount attribute lets you know if the current node has children at all, unlike the almost useless hasChildNodes method. Of course, you can check for the presence of child elements as follows:

node.getElementsByTagName( "*" ).length

But this method is too wasteful; the childElementCount built-in attribute should theoretically work much faster.
')
All this is certainly good and interesting, but what to do with old browsers that do not support the ElementTraversal interface? Obviously, you have to write additional functions for each attribute. You can see their implementation in the article “ Quick search for DOM elements ”, although I think that for many it will not be difficult to write such functions yourself, there is nothing difficult about that.

And now the most interesting thing is that Internet Explorer 8 has the opportunity to create these same getters and setters . It is strange only why in any review on innovations IE8 did not sound about this powerful and useful mechanism. In JScript, you can now create getter or setter using the defineProperty method of the built-in Object. We recall that this possibility, through the methods __defineGetter__ and __defineSetter__, was originally in browsers based on Gecko, as it turned out already in Safari 3, and in Opera 9.6 implemented this mechanism.

So, having the ability to create getters, we can implement support for the ElementTraversal interface in Internet Explorer 8, Mozilla Firefox 2+ and Safari 3+, but Opera 9.6 already supports it.

It remains to write the code:

// var element = document .createElement( "div" ); // , ElementTraversal if ( typeof element.firstElementChild == "undefined" ) { // var ElementTravrsal = { // firstElementChild: function () { // var node = this .firstChild; // // null while (node && node.nodeType != 1) node = node.nextSibling; // null return node; }, // lastElementChild: function () { // var node = this .lastChild; // // null while (node && node.nodeType != 1) node = node.previousSibling; // null return node; }, // nextElementSibling: function () { // // var node = this ; // // null do node = node.nextSibling while (node && node.nodeType != 1); // null return node; }, // previousElementSibling: function () { // // var node = this ; // // null do node = node.previousSibling; while (node && node.nodeType != 1); // null return node; }, // // , children childElementCount: typeof element.children == "undefined" ? function () { // children, // var list = this .childNodes, // i = list.length, // j = 0; // , while (i--) // , if (list[i].nodeType == 1) // j++; // 0 return j; } : function () { // children, // // return this .children.length; } }; // IE8 if (Object.defineProperty) for ( var property in ElementTravrsal) if (ElementTravrsal.hasOwnProperty(property)) Object.defineProperty(Element.prototype, property, { get: ElementTravrsal[property] }); // Firefox 2+ Safari 3+ if (Object.__defineGetter__) for ( var property in ElementTravrsal) if (ElementTravrsal.hasOwnProperty(property)) HTMLElement.prototype.__defineGetter__(property, ElementTravrsal[property]); }

By including this code in the project, you can now use ElementTraversal in most browsers:

Internet Explorer 8;
Mozilla Firefox 2+ and other browsers based on Gecko 1.8+;
Opera 9.6+ (maybe 9.5+);
Safari 3+ (maybe even 2? Unfortunately, there is no way to check);
Google Chrome 2+.

For the development of some services or administrative interfaces of this list may well be enough. Well, if you need support for all browsers, without additional features, as in the article below the link above, you can not do. Or you can still expand the list of supported browsers? If you have ideas on how to do this in other browsers, write in the comments, even if they are irrational decisions, the implementation itself is interesting.

The attributes of the new interface are used in the same way as the old firstChild, lastChild, nextSibling, and so on. For example, take the following XHTML code:

< div id ="test" > TextNode < div > TextNode </ div > TextNode TextNode TextNode </ div > TextNode TextNode 

And let's do a few moves through the DOM tree in JavaScript:

// // "test" var node = document .getElementById( "test" ); // tagName alert(node.nextElementSibling.tagName); // → "P" // node = node.lastElementChild; // , ? alert(node.childElementCount); // → "0" // ? alert(node.hasChildNodes()); // → "true"

If it was interesting, I can write more about using getters and setters in JScript and JavaScript in the next article.

Archive with the code from the article: ElementTraversal.zip

Update: transferred to the thematic blog, thanks for the karma :-)

Source: https://habr.com/ru/post/54380/

All Articles

Implementing the ElementTraversal Interface

More articles: