That cross platform bit is the weakest link sigh.
Of course, most developers still have to target older browsers, but for a private Web app where you know your target audience, this shouldn't be a huge issue.
http://gs.statcounter.com/#browser_version-ww-daily-20120820...
I'm just happy its happening at all, I know people at banks that have IE6 still.
(Speaking as a medium-sized corporation user stuck on Snow Leopard. :] )
Either way, long-term caching of such shims means the bandwidth to load polyfills only has to be expended once per client. And an extra Mb of bandwidth once per year is a pretty reasonable thing to do for particularly older browsers if it makes your development more sane.
$('p').text('Hello.')
for (var p in document.getElementsByTagName('p')) { p.innerHTML = 'Hello.'; }
Erm... no you don't: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082
ps. second example is not valid, in Vanilla JS you do it like this:
document.getElementsByTagName('p').filter(function(el) {
el.innerHTML = 'Hello.';
});TypeError: document.getElementsByTagName("p").filter is not a function
Because you don't get an array, only something array-like.
Array.prototype.forEach.call(document.getElementsByTagName('p'), function(el) { el.innerHTML = 'Hello.'; });
This discussion is a bit like how assembly programmers used to defend not moving to a high level language long after the performance benefits were not worth it any more.
But we're not at that point in the web yet. The performance benefits are worth it. Just try out JQuery Mobile if you want to see what wasted CPU cycles can do.
The point is we're well past the point where grasping for the asm-equivalent from the start should be the default unless you happen to specifically target one of those niches.
That's still going to be a lot of work if the performance issues turn out to be many separate jQuery calls spread all over your code, which is not unlikely.
Such as?
$ isn't just a syntax layer on top of querySelectorAll. When you do $('p'), it first queries the DOM for everything that matches that selector, then it creates new jQuery objects to wrap each of the returned nodes as well as creating a jQuery object to contain them.
If all you're doing is setting the innerHTML of these objects, it's a non-trivial overhead.
[1] https://github.com/jquery/jquery/blob/master/src/manipulatio...
Yes, but it's also more probable that it won't go on at all (due to browser incompatibilities and such).
The proper way is:
for( var i=0, ps=document.getElementsByTagName('p'), len=ps.length; i < len; i++) {ps[i].innerHTML = 'Hello.';}
Edit: I think I missed what you said. You're saying it's "like" and array, but unlike arrays its `length` is enumerable. I'll leave my comment so other skeptics can benefit :)
Edit2: This is what I was referring to (read the 'Note' at the right side): http://bonsaiden.github.com/JavaScript-Garden/#object.forinl...
paras = document.getElementsByTagName('p') for (var para in paras) { console.log(para)} 0 1 ... 9 10 length item
for (var p in document.getElementsByTagName('p')) {console.log(p);}
var paragraphs = document.getElementsByTagName('p');
paragraphs.forEach(function(paragraph){paragraph.innerHTML = 'Hello.';})
document.getElementsByTagName returns a DOM Node List and it does not have forEach method according to the DOM spec. DOm Nodes, Elements and Node Lists and Node Maps do not follow the javascript spec (ECMAScript) hence do not share methdos and properties. A Dom Node List does not have the methods of the javascript array. That is because DOM Node List does not inherit from the Array.prototype, because it is not javascript - it has its own spec that exactly determines what methods and properties it should have. The implementation in the browser happens to be accessible through javascript but that does not mean that the DOM is part of javascript. That is why wrapper libraries like jQuery or other abstractions are necessary to make the DOM much more accessible from a JS perspective. BTW that is why many people confuse DOM with javascript and then get frustrated which is understandable.
but never mind:
Array.forEach.call(paragraphs, function(paragraph){paragraph.innerHTML = 'Hello.';})
will work fine.
Some JS people (the ones usually with a long beard) hate how kids use frameworks like jQuery and this site is an attempt at telling them "The vanilla JS, i.e. the standard language that all browsers use and your cool jQuery leverage under the hood, is quite capable these days. Use it". They are not quite right, but aren't quite wrong either (IMO). You'll be a dreadful JS programmer if you only know jQuery. JS is sooo different from C (and Java) that if you don't know the core language everything you'll do will be wrong. For starter: there's no block scope. Only function scope.
Every JS programmer should read "JavaScript: The Good Parts" by Douglas Crockford cover to cover - before learning jQuery.
There is global scope as well, and it's (unfortunately in most cases) the default.