6 ms·
I'll take $('p').text('Hello.') over for (var p in document.getElementsByTagName('p')) { p.innerHTML = 'Hello.'; } any day!
by dag11 14y ago
I'll take
$('p').text('Hello.')
over
for (var p in document.getElementsByTagName('p')) { p.innerHTML = 'Hello.'; }
any day!
- aaronblohowiak 14y agoinnerHTML is an easy one, try setting an attribute -- you have to create a new attribute node, set its value and then add that to the element..
- mibbitier 14y agosetAttribute()?
- aaronblohowiak 14y agoIE8 =(
- masklinn 14y ago> you have to create a new attribute node, set its value and then add that to the element.. Erm... no you don't: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082
- aaronblohowiak 14y agoIE8 =(
- gildas 14y agoYou should set the node property instead (e.g. standard textContent or innerText). It will work everywhere.
- dotborg 14y agodid you ever try to debug your pretty jquery karate? ps. second example is not valid, in Vanilla JS you do it like this: document.getElementsByTagName('p').filter(function(el) { el.innerHTML = 'Hello.'; });
- Skalman 14y agoNope: TypeError: document.getElementsByTagName("p").filter is not a function Because you don't get an array, only something array-like.
- v413 14y agoThe right way is this :) Array.prototype.forEach.call(document.getElementsByTagName('p'), function(el) { el.innerHTML = 'Hello.'; });
- dasil003 14y agoI like how the end of that statement contains both a winking crooked-smile smiley next to black-eyed frown smiley.
- ams6110 14y agoThe jquery version is easier to write, and less prone to error, but in the native version it's much more clear what's actually going on.
- mibbitier 14y agoAlso in the native version, you know you're only doing the work required. The jquery one will be doing a lot of extra useless inefficient grunt work to achieve nothing. Making it incredibly slow in comparison.
- vidarh 14y agoPremature optimization, and all that. It is trivial to get raw dom nodes out of jQuery, so you can easily use jQuery to begin with and replace any code with the full DOM API calls should it every become a performance issue. 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.
- eugenes 14y agoI am rather curios now if it is possible to write the first pass in jQuery and then "compile" intelligently to native code like you would have written by hand. ;)
- MatthewPhillips 14y ago> 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.
- lukeschlather 14y agoIt depends on what you're trying to do. Mostly, I try to write code that displays the same in every possible browser without special-casing or using confusing idioms. CPU cycles are cheap. A webpage that loads a little slow is a possible lost sale. A webpage that fails to load is a definite lost sale.
- v413 14y agoThis enumeration is done the wrong way. You enumerate over a DOM node list which looks like an array, which includes enumerable properties like "length". This means that the variable "p" at some point will be "length" and "length".innerHTML = "..." will produce an error. The proper way is: for( var i=0, ps=document.getElementsByTagName('p'), len=ps.length; i < len; i++) {ps[i].innerHTML = 'Hello.';}
- pooriaazimi 14y agoI'm a JS noob, but I though 'length' was not enumerable (i.e. its 'enumerable' property is set to 'false'). 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.forinloop http://bonsaiden.github.com/JavaScript-Garden/#object.forinl...
- nailer 14y agoLooks like this is correct: paras = document.getElementsByTagName('p') for (var para in paras) { console.log(para)} 0 1 ... 9 10 length item
- batista 14y agoTry this in a browser. On Webkit at least is also returns length and item: for (var p in document.getElementsByTagName('p')) {console.log(p);}
- dag11 14y agoAh, thanks for the correction! I just wrote it out from memory, and it's been a while since I used Vanilla-JS DOM selectors ;)
- nailer 14y agoThat's ES3. You have no reason to choose that way anymore - ES5 loops work everywhere current, can be polyfilled into IE8, and don't require any boilerplate stuff. var paragraphs = document.getElementsByTagName('p'); paragraphs.forEach(function(paragraph){paragraph.innerHTML = 'Hello.';})
- deleted 14y ago[deleted]
- wycats 14y agoI'll take $(node).remove() over node.parentNode.removeChild(node) any day.