JavaScript ElementTraversal proposal

27 July W3 announced a new Working Draft, called: ElementTraversal

This is a "new" feature but today it's not cross browser so this is my proposal to have Element Trasversal with every recent browser:

(ElementTraversal = function(node){
 this.node = node;
 this.firstElementChild = this.getFirstElementChild();
 this.lastElementChild = this.getLastElementChild();
 this.previousElementSibling = this.getPreviousElementSibling();
 this.nextElementSibling = this.getNextElementSibling();
 this.childElementCount = this.getChildElementCount();
 
}).extend(null, {
 getFirstElementChild:function(){
  for(var c = this.node.childNodes,
   i = 0,
   j = (c && c.length) || 0,
   e;
   i < j;
   i++
  ){
   if(c[i].nodeType === 1)
    e = c[j = i];
  };
  return e;
 },
 getLastElementChild:function(){
  for(var c = this.node.childNodes,
   i = ((c && c.length) || 0) - 1,
   j = -1,
   e;
   i > j;
   i--
  ){
   if(c[i].nodeType === 1)
    e = c[j = i];
  };
  return e;
 },
 getPreviousElementSibling:function(){
  var e = this.node.previousSibling;
  while(e && e.nodeType !== 1)
   e = e.previousSibling;
  return e;
 },
 getNextElementSibling:function(){
  var e = this.node.nextSibling;
  while(e && e.nodeType !== 1)
   e = e.nextSibling;
  return e;
 },
 getChildElementCount:function(){
  for(var c = this.node.childNodes,
   i = 0,
   j = (c && c.length) || 0,
   n = 0;
   i < j;
   i++
  ){
   if(c[i].nodeType === 1)
    ++n;
  };
  return n;
 },
 update:function(){
  this.constructor.call(this, this.node);
  return this;
 }
});


And this is a basic test:


test


 
test

 test
 test

test



My proposal is based on extend Function prototype, You can find them here.

Just a note about update extra method: not every browser support a defineGetter / setter method so update is a quick way to have correct properties.

If You create an instance and You modify some node, You should use:

ET.update();

This method returns instance itself, so You can pass them directly on other functions.

Comments

Post a Comment

Popular posts from this blog

noscript tag behaviour and head conflicts

In this Web 2.something era there's a big problem with noscript tag and I wonder what does W3 think about them. noscript and its standard implementation This tag is really useful to increase page informations or accessibility, allowing developers to show an alternative content if user has not JavaScript enabled or his browser doesn't support other kind of tags. <script type="text/jvascript">doStuff()</script> <noscript>Your browser can't do my Stuff</noscript> This is a basic example of noscript usage and expected behaviour is that every JS compatible browser will try to execute code insde script tag while every JS disabled or not compatible browser will show an alternative information. So, what's wrong with noscript ? When a browser is JS compatible ignores totally noscript tag. It doesn't render its informations, just " jump " after the end of this tag. At the same time, if a browser is not compatible with tag used bef...
Read more

Function.prototype.notifier

There are way too many ways to stub functions or methods, but at the end of the day all we want to know is always the same: has that function been invoked ? has that function received the expected context ? which argument has been passed to that function ? what was the output of the function ? Update thanks to @bga_ hint about the output property in after notification, it made perfect sense The Concept For fun and no profit I have created a prototype which aim is to bring a DOM like interface to any sort of function or method in order to monitor its lifecycle: the "before" event, able to preventDefault() and avoid the original function call at all the "after" event, in order to understand if the function did those expected changes to the environment or to a generic input object, or simply to analyze the output of the previous call the "error" event, in case we want to be notified if something went wrong during function execution the "handlerer...
Read more

JavaScript private Python style properties - yet another experiment

JavaScript constructors (call them classses if You prefere) have some problem with private parameters or private methods. To use a private parameter You should simply use a variable without this as scope prefix function MyConstructor(){ this.getPrivate = function(){ return private; }; var private = "something"; }; It's simple and it works perfectly. Any external scope could get directly private variable and You can know its value only calling getPrivate method. var obj = new MyConstructor; alert(obj.getPrivate()); The cool thing is that if You change externally returned value it will not be changed inside object too but please remember that if You change them and it's a generic object or an array, these changes will be valid inside object scope too (object and arrays are sent by reference, You need to clone or copy them before to return them externally). Well, this is just a private parameters introduction and this is not useful if You write only using prototype ...
Read more