One line to rule them all
One line to rule them all,
one line to find them.
One line to bring them all,
and in the function bind them.
The “One Line”:
if(!foo.nodeName) foo = document.getElementById(foo);
Imagine you make, borrow or steal a function that does “something” to a given element. The function is setup to require the ID of the element in question, so that you can do ye ole “getElementById” (gEBI from now on) on it to then do whatever spiffy thing you want to do to it.
But what if you already had already done a gEBI on this element, and the result of that is sitting in a variable just waiting to be used… why should you waste resources doing it all over again, and have a second variable with all the same information.
Or… reverse it. Your function is expecting a gEBI’d var but you pass just the ID. It won’t have the information it needs.
Enter the “One Line.” What the code does is check to see if the variable that was passed has an attribute (nodeName) of a gEBI’d variable (if(!foo.nodeName)). If it does then it goes merrily on it’s way. If it doesn’t, then it must have just been an ID so the line does a gEBI on it so we can do what we want to do to it (foo = document.getElementById(foo);). It sets the results of the gEBI to the same variable the ID was, so the code below it is none the wiser. Whichever thing you send to it, after this line you will have the same thing to work with.
Now granted… in a perfect world all your functions will be written ever so neatly and you will always remember what to send to them or it would always be one or the other. But since we are such a generous community, and are always sharing new ideas, I’m sure your .js files are a hodge podge of functions from various people, and even various scripts that you have written previously and pulled into a new one. The One Line levels the playing field.
So to sum up… this one line of code makes it so you don’t have to worry about what you send to your function. Either an ID or a gEBI’d var will work.
A really lame example of a function that changes your text to red:
function redText(theText){
theText.style.color = "#f00";
}
In the above, it is looking for a gEBI’d variable to apply the style to. So it won’t work if you just pass the ID.
function redText(theText){
if(!theText.nodeName) theText= document.getElementById(theText);
theText.style.color = "#f00";
}
Using the One Line, it can now accept either an ID or a gEBI’d variable. Everyone is happy
One line to rule them all,
one line to find them.
One line to bring them all,
and in the function bind them.
Comments(1)
Good stuff man. I like it.
Another way to do it (this is how I have done it recently) is to check & then assign like you do, but the check I do is a little different. I do a typeof() on the variable — if it returns ‘object’ then I must have the element, if it returns ‘string’ then I must just have the ID, if it returns ‘undefined’ then the variable has been initialized but not defined, or doesn’t exist at all.
So the one line would look like:
if(typeof(foo) != ’object’) foo = document.getElementById(foo);
(Now that I look at it, I think it’s even longer doing it this way than how you do it.)
Anyway, it’s just another way of doing the same thing. Thanks for the ‘one line’.