PDA

View Full Version : Your best JS library for DOM manipulation?



TheBerliner
28 Jan 2010, 10:26 AM
Best JS library for DOM manipulation?

My web app's UI is based on Ext JS. I now ran into the need of creating DOM objects directly for compatibility and performance reasons. Creating a DOM interface myself proves an endless task due to IE's idiotic bugs and exceptions. Ext offers very little as far as I can see.

Thus, my qustion to the experienced experts:

Which is your/the best JS library for DOM manipulation?
What do you recommend for use in conjunction with Ext JS?

Hints and recommendations most appreciated!
Thank you in advance

Mike Robinson
28 Jan 2010, 12:01 PM
Is it possible for you to accomplish your requirement within ExtJS? (Can you elaborate more fully on just what your requirement is?)

What makes me very nervous about a requirement like this one is that "JavaScript interface libraries frequently assume that they know everything about what's going on in the world of the DOM." If they do not, the interface that's in front of the user's face can become badly scribbled, and that never makes you look good.

TheBerliner
28 Jan 2010, 12:22 PM
Is it possible for you to accomplish your requirement within ExtJS? (Can you elaborate more fully on just what your requirement is?)
No way! Not even the minimal requirements are supported. DomHelper seems to be very buggy (a recent discussion here on the forum) and is not documented at all in major parts. And it seems that it does in no way circumvent even the generally known IE bugs (like it's inability to properly process innerHtml).



What makes me very nervous about a requirement like this one is that "JavaScript interface libraries frequently assume that they know everything about what's going on in the world of the DOM."
Well, I am hoping for a lib that:
- Offers a clear and concise API
- Covers browsers (especially IE's) obscurities
- And thus allows direct manipulation of the DOM, primarily creating DOM nodes directly.

For example: It took me three days to find out that IE has a severe bug in the name and useMap attributes for images and maps and how to circumvent this. My code ran perfectly well in FF but no chance in IE just because this greedy M$ does not fix their bugs. Microsoft managers should be sent to Gitmo for what they do to us!

tryanDLS
28 Jan 2010, 1:14 PM
Please stop ranting about MS and IE - we get it. You still haven't explained how using Ext to create the elements or jQuery for that matter are causing you an issue.

Ext uses DomHelper exclusively to build DOM elements, so to say that it's buggy, or that it's not fast enough, or doesn't do what you need is not helping.

What exactly are you trying to accomplish?

VinylFox
28 Jan 2010, 1:44 PM
Ive seen enough vague explanation, I would love to see a code tag in this thread at some point.

TheBerliner
28 Jan 2010, 1:45 PM
You still haven't explained how using Ext to create the elements or jQuery for that matter are causing you an issue
I wasn't talking about jQuery, which seems to be a candidate but since I am only interested in DOM support I cannot judge if there is not any better and more specialized lbrary available. Therefore, my post here.


Ext uses DomHelper exclusively to build DOM elements, so to say that it's buggy
Well, I read a recent discussion here where somebody failed using DomHelper to add html in IE7. When I look at the doc of DomHelper I see no methods at all to encapsulate the bugs and specialities (some see above) of browsers. Nor any real API to access nodes directly. The DomHelper is very sparse in general and the doc is even more minimal.

Further on, it seems that even many of the available methods are not documented at all (a general Ext problem but it seems to be even more severe in this case).

So I would not even consider DomHelper for the given reasons.


What exactly are you trying to accomplish?
Ok, more details:

1) Cover browsers (especially IE's) obscurities
Protect me from having to find out myself about all bugs and perversities of the browsers, namely IE (see for example: www.quirksmode.org (http://www.quirksmode.org)) when creating and changing DOM objects. An example was given above.

Another is currently in setting event actions to DOM objects. Sometimes it just doesn't work, although the same code works in other cases. Most likely not my fault. Finding out how to circumvent these browser bugs just costs too much time.

2) Allow direct manipulation of the DOM, primarily creating DOM nodes directly
I must/want to create many DOM nodes directly, not via Html, and I also have to change them. I am speaking only of performance critical cases. In the one case that I solved (because the html wasn't correctly interpreted by IE7) the direct creation of DOM nodes brought a significant performance improvement.

For example: I succeeded with my map/area problem, which was caused by an IE bug. But that took days for finding out and trial and error. I am facing more problems already with domObj.setAttribute, which often just does not work. My code is correct but this insane IE7 has so many bugs and they are nowhere clearly (all) documented.

Such cases should be covered by an API to solve browser obscurities and perhaps to improve and simplify the not to well designed API for direct DOM manipulation.

Clear enough?

TheBerliner
28 Jan 2010, 1:48 PM
Ive seen enough vague explanation, I would love to see a code tag in this thread at some point.
Pardon, but you must have used the wrong thread with this request for code!

I was asking for user experiences and recommendations for the best JS lib to handle the DOM?

So please explain how you one can possibly expect any code to make this "less vague"?

VinylFox
28 Jan 2010, 1:52 PM
No way! Not even the minimal requirements are supported. DomHelper seems to be very buggy ...like it's inability to properly process innerHtml...

What code are you using that makes you think Ext JS is unable to "properly process innerHtml"?

TheBerliner
28 Jan 2010, 2:06 PM
What code are you using that makes you think Ext JS is unable to "properly process innerHtml"?
Why are you trying to divert this thread from it's original subject? Nothing of this is my concern, as I made very clear in the statements above.

But since you were asking: It seems that DomHelper does not solve or circumvent IE's inability to process innerHtml the way FF does well, but that is not my subject here and I am not seeking a solution for this or any particular problem. In any case, I cannot consider DomHelper as a candidate for being a concise DOM manipulation library.

VinylFox
28 Jan 2010, 2:55 PM
Ok then, enjoy your ranting thread.

jsemmanuel
29 Jan 2010, 2:55 AM
Jquery core or prototype might work just fine.
Or do a search for javascript framework reviews and have a look at a few.

I have used a couple of these and they have worked fine for my purposes so far. I have never needed to do extensive testing across multiple browsers, but from ie6+, ff2.5+, opera 9+, chrome 3+ that I have tested against, I haven't had much complaints in jquery and prototype.

TheBerliner
1 Feb 2010, 2:58 PM
Just to keep possible readers posted:

From my current findings, the most comprehensive lib especially for manipulation the DOM seems to be DOMAssistent (http://www.domassistant.com/). However, I don't yet have any experience with it, because I succeeded in solving my urgent current problems and I therefore delayed its use.

It also seems that DOMAssistent does not to cover all obscurities and bugs of IE7, and this was my primary concern.