Updated March 2nd 2007
- It is a shorthand function for
document.getElementById. To get a reference to an element, just supply the
idof the element you’re looking for:
- A function to get all elements with a certain class name. More thoroughly described in The Ultimate getElementsByClassName.
- A function to add a class name to an element. It automatically takes into consideration if the element already has that class, and doesn’t apply it again if that’s the case. It also adds necessary spaces if the element already has other class names. Called like this:
- A function to remove a class name from an element. It automatically removes the class name and any eventual trailing space. If the
classNameproperty of the element starts or ends with a space after this operation has been completed, it removes them as well. Called like this:
- A function to get all elements with a certain attribute, and, if you want to, a certain value in that attribute as well. More thoroughly described in Monday code giveaway: getElementsByAttribute.
- A way to prevent the default behavior of an element; for instance, stopping the behavior of a link. Just pass in the event as a parameter:
- A very handy way to find out the rendered CSS styles on an element. Described in detail in Get the rendered style of an element.
- Support for
Array.pushin IE 5.0
- If IE 5.0 is part of your target audience, support for the
pushmethod of the
Arrayis added. Note: it is only applied to web browsers who doesn’t already support it.
[…] Robert Nyman developed the ‘ultimate’ JavaScipt library. Functions for […]
Funny. I was thinking about building my own personal lib the other day. A bit more elaborate then EJ but still smaller then the double digit ones.
Also, I just ran Hyves (sort of MySpace) through Fiddler to see why it is so slow. Turns out that of the 835Kb request 610Kb came from 3(!) different JS libs and some homebrew code. As far as I could see without GZIP compression. Ridiculous.
Looks good 🙂
I agree that these are "Essential" unlike others which are huge eg: YUI.
Any chance of compressed versions to futher reduce the size?
Not sure I agree with you on your minimum set. A library like jquery which weighs in at 18.5k does so much more and makes the code you write much simpler, and includes more advanced and flexible versions of your functions.
I should write my own library too.
I'll do it right here:
<code>const id = "getElementById";
const tags = "getElementsByTagName";</code>
I consider it done. Use it like this:
<code>var items = document[id]("nav")[tags]("li");</code>
Very nice. 🙂
Can we go a bit less marketing about the description of our stuff? Every few months there is "the only trick you ever need", the "library to end all your troubles", the "best way to fade things in and out and make them beep" and and and…
Using event delegation I stopped caring much about getElementsByClassName, but this essential thing doesn't cover event handling at all. If you know your events you can avoid using expensive loops and DOM lookups. It is not hard to get DOM nodes using the DOM methods. Yes, getElementById is longer than $, but $ was never meant as a method name, but was reserved for machine generated code to keep it short. As almost every library out there has a $, $$ or whatever shortcut, this is where it becomes impossible to make them work together, and wasn't the whole idea of libraries to better our coding practices?
I am not a big fan of libraries as a whole, but I found out that with YUI's event utility I spend a lot less time trying to figure out what the heck is going on and why this or that browser behaves strangely.
The purpose of a library – at least to me – is to make our lives easier by normalising browser problems and offering fixes for issues that are broken or odd in the DOM methods. Instead of concentrating on that we right now have an avalanche of libraries that all want to be smaller than the other one. It is not always about size.
Time warp! IE5 as a target! 80KB considered huge! 😉
I strongly agree with Chris Heilmann on this one. What JS library is the right one depends on the requirements of the project.
The benefit of the main libraries out there (such as YUI, Mochi, Dojo) is that they are maintained, they are modular and they are well tested. Many of them offer size optimized versions, but if it’s still a concern you could always go in and chunk out the functions you need.
Either way, I don’t see the problem with an 80 KB download. That’s the size of a couple small images and the file gets cached on the user’s machine after the first download. A concern only if you’re catering towards users with a 56K modem.
I used the YUI calendar on a recent project and whilst it works great, and was just about bearable on a rare 56k connection I happened across at a clients office, the size (around 150k all told) scared me senseless!
I like the idea of libraries, but in my experience you end up using a few you grow familiar with, switching between them to get the best fit for the current job.
Steve, tried the minified version for a live system? YUI comes in several ways: One to fiddle with the code and one to use it.
For me, these functions are much more approachable than the whirly-animation-function-filled libraries. I would rather include just the functions required rather than a whole 80k client-side library.
There are words that describe people like me, though: "Fastidious" is one, and they go downhill from there 🙂
Good one, Robert. Finally a library that I might actually use.
To everyone appreciating your gratitude: thank you, and thanks for giving it a try!
To me, it's up to each and everyone what they prefer. jQuery might be suitable for some, while others think there's too much to learn and adapt too.
Well, of course the title and name of it is a bit sensationalistic, but I guess it's because we live in the time of Digg and its likes. Then again, the title is slightly ironic, because, naturally, it all depends on in what situation it will be used, and that will truly define the needs.
I left event handling out here, partly because not everyone needs it in all they do, partly because I wanted this to consist of code purely written by me (and I don't have any ultimate event solution. Yet. ;-)).
Of course, if you for instance prefer YUI's event utility, by all means, use it. I just share what I think might help a lot of people out. In the end, I just want people to be happy using whatever they seem fit their specific needs best.
Ha ha! 🙂
Absolutely. My opinions and reasons behind the naming is expressed above.
This is slightly off topic- but my first name is EJ. Subsequently- reading this article and the comments I was rather amused.
These are all DOM related functions. If you wanted a great set of DOM functions, YUI provides a 3.13k DOM Collection utility and you get a much more robust set of methods.
These are basically functions shortcuts for which I wouldn't waste a superfluous script tag.
Sounds great, and thanks for lending your your initials! 🙂
While I'm sure that YUI consists of a lot of those methods and additional ones, I'm also fairly convinced that there are a lot of methods in there that most people don't need. That's the whole idea of this tiny library: functions you will always use.
Well, that's your call. 🙂
Most are indeed short functions to make life easier as a scripter, but the <code>getElementsByClassName</code> one is, in my opinion, a little more than just that.
Great points Chris Heilmann … !!!
Content Heavy Web Development
Ha! I thought you might have made the title a little sensationalistic on purpose … hell, it got me to comment. 😉
I didn't mention it in my previous post, but I do think your EJ library is quite well written and would be a nice, simple addition to many small projects.
Hey Robert! Long time no see.
Good job! 🙂
Thank you, I’m glad that you like it! 🙂
Nice functions, definitely essential but I'll be sticking with Mootools. It's a great little library, you can customise it to include as much or as little as you like and it gives you a super inituitive syntax to work with. For example:
<code>theDiv = Element('div').addClassName('thediv').injectInside(document.body).addEvent('click', doSomething);</code>
I'm glad for your sake that you've found a library that you like! When it comes to the <code>addClassName</code> part of your example, I'm interested in how they have implemented that. For Gecko-based web browsers, you have the <code>HTMLELEMENT.prototype</code> and apparently there's support for that in Opera as well. I also found that there's a workaround to make it work in Safari.
That leaves IE, and as far as I know, you need to loop through all the elements in the web page to do that, and to me, that sounds like a serious performance issue.
I'd be happy to be proved wrong here, so please let me know if you know how it works!
Thu 9 Nov 2006
links for 2006-11-09
Posted by StopsAtGreen under otaku
Since the question about mootools, I thought about replying myself (the author).
In mootools there's the $ function, that other than targeting an element by its id, attaches some properties (like addClass) to the element itself, then those properties are cleared onunload (to avoid leaks).
So no full page loops, and attaching properties to an element seems to be quite fast. in Mark's example, "new Element" is just a shortcut to create a new element (document.createElement) and stick those properties to it.
p.s. the next version will use HTMLElement if the element is an instance of HTMLElement (slight speed increase for mozilla browsers then).
Ah, I see! Thanks for your reply!
But that means that for <code>addClassName</code> to be supported on an element, it must have been referenced once through the <code>$</code> function first?
And yes, if every web browser supported <code>HTMLElement</code>, we would have lots of interesting options! 🙂
Robert, I am sorry, but that was a really low blow. Yes, I do work for Yahoo, yes, working a LOT on complex sites made me aware of how good YUI is for several solutions, but NO I don’t think at all it is important to point out to people that Dustin and me work there and hint that our comments might be tainted. It is pretty obvious, at least in Dustin’s case that we work there anyways.
As you might remember, I too did a small collection library like this one called DOMhelp to make the example code of my book shorter. I published this one on a site and asked people on mailing lists about their feedback to make it better.
I could have called it DOMHELP THE ONLY LIBRARY THAT KICKS ARSE AND IS BETTER THAN WOW AND TOTALLY AND FREE AND STUFF and rocked digg.com with it, too, but I didn’t.
So please, if you get some criticism then take it on and don’t try to belittle the criticism by assuming that Dustin or me need to suck up to Yahoo by advertising on blog comments. We were hired for our skills not as a marketing milita.
I like what you do and I like your style, but please don’t pull cheap stunts like that when I don’t praise what is clearly a helper for yourself as the most amazing achievement in JS in the later months.
If you want to suck up to digg, call your next collection of helper functions britneyspearsnaked.js.
I think you’re totally overreacting here, and I’m sincerely sorry that you felt that way about my comment. I had a number of people pointing out to me, offline, that the two persons mentioning and talking about YUI in the comments were also employees of Yahoo.
They also said that such information could be helpful, and not necessary for the sake that you’d be taken as a ” Yahoo marketing militia”, but it might also be in a good way, showing that you have in-depth experience working with YUI.
After writing that comment, I had people telling me that it was interesting to read your comments in that light, to see from what perspective you came from. Whichever way, it is definitely not about belittling your criticism.
Besides, the way I saw your comment wasn’t as criticism as all (except on my naming of it), but just your view on libraries. And about taking it on, I think I replied to basically everything in your comment, so I wouldn’t say I was backing away from or ignoring the things you brought up.
And, again, regarding the naming, it was partly to get attention, partly to be ironic, because, exactly as I state in another comment above:
Thank you. The feeling is mutual, and I hope we one day get the opportunity to meet and discuss developing and other things.
Interesting article and library, good work! Indeed these functions are essential in any web application you build. I however don't really see the point of this library as it misses so many functionalities which are also seen as ESSENTIAL to almost any serious web application developer. If I would use this library in any of my projects, it would cost me a tons of extra hours to code all the other ESSENTIAL functions as well.
There are enough libraries out there that are also small in size, or have a version with only the essential functions (like the yui dom version).
So keep up the good work in spending time to make our life easier (thanks!), but be aware of not spending too much time inventing the wheel again.
Thank you! Naturally, this library isn't complete for many web sites, but from my experience, it consists of the base functions that will be used in every web site. I have posted some of the functions before, like <code>getElementsByClassName</code> and <code>getElementsByAttribute</code>, and they have been very popular, so I wanted to package them as well, for everyone's convenience.
Regarding reinventing the wheel: in some aspect it is of course true, but people want to design their own wheel that suits them best, they want to own the wheel concept and last, but not least, they want to customize their wheel to their, or some other peoples', liking. 🙂
Thank you! I hope they will become of use to you!
I personally like the way Mootools handles this. Go to the download section, choose which modules you need and generate your library (compressed).
Yes, I saw that the other day. Really nice packaging possibilities!
[…] n the new things you need to address. Here are the functions included:“Continue to read more and download…. […]
I agree with You … and that's why I've created bytefx 😉
However, Your functions are interesting enought for developers that know how to implement good code to add effetcs or medium/advanced scripts.
"80 Kb libraries" You're talking about do these things but do a lot of other things too …. then I think is not correct to compare few functions (sure, these are a must!) against complete frameworks.
Why I compare them is that while larger libraries naturally consist of more functionality, you usually just use a select few of them, so in the end you have about the same result.
As You know, "web developers" need a good JS knowledge to create thoose functionality with or without your EJ library.
Try to think about an unskilled JS coder that uses your EJ functions and creates with more lines of code the same functionality of another framework (that probably in same number of lines does something else too) … What I'm talking about is that your functions aren't for everyone while a complete framework should be the best solution if You need a RAD and You don't have yet enought skill to create one.
Then please use lightweight solutions … or use these kind of library (EJ) to create, again, lightweight solutions 😀
I understand what you mean, and you're completely right. My take, though, is that anyone using a library should be able to recreate that functionality themselves, or at the very least understand how it works (as opposed to knowing just what function/method to call).
If you don't, I don't think you should use a library. What do you do if it doesn't work as intended? Then you're clueless.
I think that all libraries lack in something that you need or have some unuseful functions,
so the best solution is, maybe,
to write a general library for every project with only the function you really use in that project.
Apart of these there was libreries that include a set of function to standardize the browser
such as my work on setAttribute or Andrea JSL,
these libraries aren't always needed, but if you use some code like setAttribute or Array.push or even getElementById you should include them for compatibility.
There are different libraries for different purpose.
Absolutely, I think that's the best way too. That's the main reason why I created this library: it consists of methods you will always need, and then it's up to each context what more you have to develop.
[…] Nov 2006 ]::[ General ]::[ ]::] Getting tired of those 250 KB Libraries? Robert Nyman got the answer:
The web is littered with full-blown JavaSc […]
Does the license should be "free to use and redistribute" not just only "free to use" ?
It depends on what you mean with "redistribute" . It means free to use, in any web site; if you're developing a software product that you will sell, to me, the just way to do it would be a matter of negotiation.
Maybe I'm a bit late with my opinions, but here goes anyway.
First of all, a couple of loose functions don't make a library. Agreed, most are essential, and every developper worth his/her salt should at least have equivalents (of own making!!) in the toolbox. Why of own making? Because they make a great exercise in coding to specifications (official or adopted). And if one can't crack those things on his/her own, one shouldn't hope to ever being called a developper ;). Why at least? Because I can think of some dozen others that are equally essential (take backporting js 1.6 array methods or String.trim for example). But they are still what they are… a bunch of loose functions.
Where this discussion really get's ridiculous is that in the case of commercial usage, you even dream of charging money for what are in essence nothing more than some almost prototypical functions that any real developper can write in half a day (being polite here :)). Come on man, production quality code is something else altogether. Such quality asks for robustness, meaning exception handling, type checking and stuff like that. Things I almost never see in most so-called "professional" libraries.
Don't get me wrong, your functions work great and you did a fine job on them. But bashing YUI while you clearly never looked twice at it is, dare I say, plain stupid. It's entirely modular, no need to include the whole lot if you only need event functions for example. Besides that, it's coded in such manner that it's almost impossible to fuck up. As professional-grade code should be. And the argument that many (all?) libraries bring not needed code along, applies to your, um, library too (why, oh why should I use addClassName in every project???).
I think you made an error with dissing Dustin and Chris because of their employment. Those two are at a lonely height when it comes to js development, so a bit more respect would have been appropiate. They WERE in fact hired for their skills (just look at Dustin's photos and everyone will agree he'd make a terrible PR-guy ;)). Not many people will ever be able to stand next to them concerning coding skills and their craftings speak for themselves. When guys like those two recommend YUI, maybe it's best to take notice. Also, YUI is their baby (or at least parts of it), so it's only normal they promote it. Besides that, YUI is simply and plainly one of the best libraries around. Don't take my word on that, study the source and play around with it. Off course everyone will be thinking by now that I also work at Yahoo. Well, too bad for me I'm not. But I know who's who, and so should you. In fact, you should be flattered such guys took the time to look at your efforts. I know I would be.
The questions concerning Mootools puzzled me a little. How come a skilled developper like you claim to be, has to ask how something is implemented in it? Download, look at source and you have your answers. At least, that's how I would do it ;). No time is no excuse, it took me about 5 mins. If I would run a blog on developping, I'd NEVER ask such questions. Not in public anyway lol.
Ok, that was low from me. I know I've given a fair amount of criticism here, but remind that it's all given with the best intentions.
One last word on file sizes: has anyone ever heard of browser caching? After the first download, even something like 300 kb of code is no problem anymore. Why bother then? Most sites send a lot more bytes than that anyway (photographs, logo's,…), so I don't see the point. This page alone is now more than 80 kb, and still it loaded fairly fast. I agree that loading a library to use two functions is overkill, but who does that? If I use a library, I USE it. Even when there are some functions you don't need at every page, just point to it with an absolute url from everywhere on the site and after the first call it's fetched from the cache. Lots of goodies at hand and minimal loading time: it can be done with some knowledge of the web internals.
Anyway, time to finish. My rant may be a bit lengthy, but I first read all of the comments and felt like I had some things to reply on. Or is there also a "law" that says comments should be short ;). But I tend to be verbose, I know. Maybe it's best I start my own blog :). Despite of all the above, I whish you all the best. Untill next time then?
I'd just take the opportunity to reply to some of your comments:
Not every function has to be dependent on each other to be a library. That's the difference between utility libraries and concept libraries.
As has been stated numerous times above: the name is ironic. With that said, of course some of the functions are basic ones in almost every application.
Point one and two: true and true. And still I stand by my points too. Let's say we both mark valid points here.
What other purpose could the negotiating have?
But maybe I was a bit too harsh. So if I offended in any way, please accept my sincere apologies. Reading the whole thing now after a good meal, there are some passages that I could have phrased less negative. Thought you would react on other things though lol.
Note to self: never comment again on an empty stomach and without sleep. Get's ugly real fast 🙂
I wouldn't call it negotiating, but rather expressing my point of view. The idea of sharing code for free, albeit how simple some people might find it to write it themselves instead, is in the spirit of keeping it free.
See it more as my standpoint that I prefer it not to end up in some product billing ther users.
And it's ok, your apology accepted, although it it was a borderline example if it was really necessary or not. 🙂
Yeah, maybe, but that's a bigger topic, and in the end it's always a matter of time and context. 🙂
Aw, now I feel bad :(.
I agree, I got carried away too far. Way out of line in fact. Dunno why I attacked like that. Maybe I read too many posts of would-be guru's and mistook you for one of them. Anyway, it doesn't matter how valid my points are if I bring 'em like I did there.
Sorry Robert, I promise to think twice before starting a rant like that again. I doubt if I would take it so calmly when it happened to me…
For what's it worth, I took a look around the site and found many reasons why I shouldn't have behaved like that. And that's my final word on it.
falls on knees "Spank me, I've been bad" 🙂
[…] – The DOM assistant Published on Thursday, January 25th, 2007 When I released my EJ code, while I felt that it contained very useful functio […]
djuqmm mnbk ynxxg order viagra cheap cheap viagra online generic cialis online iit wveuab lryk khpwj hssbn.
this is very useful for me
I have to second the idea of learning as much code as possible simply by using it Ã¢â‚¬â€œ a trial by fire of sorts, and then trying to craft your own Ã¢â‚¬Å“libraryÃ¢â‚¬Â based on what you see yourself using most often. IÃ¢â‚¬â„¢m still relatively new to Java and wouldnÃ¢â‚¬â„¢t want to give myself too many shortcuts just yet Ã¢â‚¬â€œ still feel like I need to work for it. That said, I think this example does make for a nice set of terms for basic work. At the same time, I think it makes for an excellent prototype for anyone wanting to craft their own list of terms. Maybe we all need to do it, but youÃ¢â‚¬â„¢ve sort of offered us a path to take. Frankly, I canÃ¢â‚¬â„¢t understand why so many people have gotten quite so bent out of shape about any of it.
How can I solve sniffing-the-browser problem when IÃ¢â‚¬â„¢m currently using IE7 and FF? I believe this has been tested in Internet Explorer 4+, Netscape 4.x, and Netscape 6 as the solutions are just cross-browser scripts.
Do you have any update on related issues using other browsers beside the ones that you have mentioned in your post? This is very interesting and hopefully you can make this applicable to all browsers.
No more work is being performed on this code at the moment, Therefore, I'd rather recommend taking a look at DOMAssistant which is continuously being worked on.
You can read more about finding position in Find position.