how to extend document.getElementsBy*() in Firefox

[Dormilich]

I want to add (prototype) a method to the node list returned by document.getEle mentsByName() (and related, i.e. NodeList resp. HTMLCollection) .

unfortunately, neither the NodeList nor the HTMLCollection interface seem to be prototypable in Firefox. (NodeList works in Safari & Opera, don't know about IE)

has anyone of you an idea how to solve this?

note: this matter has already been discussed, though I didn't find any solution to this problem. (beside prototyping into Object interface).

[acoder]

I don't think this is possible. Either create a function which does the job or create your own object with the nodelist and then extend that instead.

[Dormilich]

you mean substituting document.getEle mentsBy*() with my own function (kind of)?

[gits]

may be you could live with something like that:

[CODE=javascript]document.baseGe tElementsByTagN ame = document.getEle mentsByTagName;

document.getEle mentsByTagName = function(n) {
top.console.log (this.baseGetEl ementsByTagName (n));
}

document.getEle mentsByTagName( 'div');[/CODE]
kind regards

[acoder]

you mean substituting document.getEle mentsBy*() with my own function (kind of)?

Not necessarily. You could have a function which does whatever you want to do with the node-list and pass it the result of document.getEle mentsBy*(). If that's not to your liking, create your own object and pass it the node-list and extend to your heart's content.

[Dormilich]

@gits: that won't do, since I don't want to do that for every method that's returning a HTMLCollection.

@acoder: passing the NodeList as argument seems indeed the best way.

maybe I'll do both in a try-catch block…

[gits]

hmmm ... what about that simple loop for that task? :) (FF + Firebug to test in console)

[CODE=javascript]function extendMethod(fn ) {
top.console.log (fn);

document['base' + fn] = document[fn];

document[fn] = function(n) {
nodeList = this['base' + fn](n);
nodeList = doSomethingWith NodeList(nodeLi st);

return nodeList;
};
}

for (var i in document) {
if (/getElements/.test(i)) {
extendMethod(i) ;
}
}

function doSomethingWith NodeList(nl) {
top.console.log (nl);
}

document.getEle mentsByClassNam e('normal');
[/CODE]
that would always pass the nodelist for all 'getElements'-methods to a function called 'doSomethingWit hNodeList' ... before the 'getElements'-method returns

kind regards

[Dormilich]

I have to bear that in mind, maybe I can use it sometimes…

that's what I want to do:

document.getElementsByClassName("attachEvent").addEventForEach("click", doSomething, false, some_param);

obviously the initial thought was to extend HTMLCollection or NodeList. but alas, I don't want to call a function (i.e. attach an event) every time I get a HTMLCollection from the document. seems like I have to use a function, where I pass the NodeList…

EDIT: hm, maybe I can do something with prototype's bind() method…

[gits]

the construct does that exactly? here is just a litle adaption to have it a bit more generic :)

[CODE=javascript]function extendMethod(fn ) {
top.console.log (fn);

document['base' + fn] = document[fn];

document[fn] = function(n, eachFn) {
nodeList = this['base' + fn](n);
nodeList = eachFn(nodeList );

return nodeList;
};
}

for (var i in document) {
if (/getElements/.test(i)) {
extendMethod(i) ;
}
}

document.getEle mentsByClassNam e('normal', function(n) {
for (var i in n) top.console.log (n[i]);
});
[/CODE]
this expl. code could just simply integrated into any oo framework etc. and now it' s able to get an eachFn param passed to the getElements-method ... that is a function that should be called with every node of the returned nodelist.

kind regards

[Dormilich]

now it' s able to get an eachFn param passed to the getElements-method

in the end it's like calling eachFn(nodeList ) inside the getElementsBy*( ) method. so I just moved the function call from outside to inside… well, for my current problem this rather seems not worth it.

thanks anyway for the insight into method manipulation.

[gits]

:) nothing to thank for ... i currently think about such things too since you asked that question ... and for our current goal those ideas above might help us sometimes ;) ...

kind regards

[Dormilich]

found some talk about DOM iteration 1, 2. this could be a useful starting point.