Live DOM Viewer

Live DOM Viewer

Converted it into user js:
LiveDomViewer.js
Invoked with CTRL+ALT+double_click

Just the DOM Viewer part. Tag names are clickable to reveal computed style properties.

Thanks to Ian Hickson and aleto.

Screenshot: LiveDOM.png

a advice - to export the least symbols as possible and therefore not pollute the global window namespace and prevent collisions, declare all function before the dblclick listener, and wrap the entire script with (function(){ ...code here... })();. Also, declare ALL variables as local.

The script fails for non standard tags as seen in the hide-objects UserJS. The attributes collection for non standard tag seems to be undefined. Probably something that should be changed in that script though...

Originally posted by xErath:

a advice - to export the least symbols as possible and therefore not pollute the global window namespace and prevent collisions, declare all function before the dblclick listener, and wrap the entire script with (function(){ ...code here... })();. Also, declare ALL variables as local.

I've tried to fix it, but one function can not be made local as it's executed when user clicks tag name.
And is there a way in javascript to explicitly declare local variable? How to do it (prepend it with var)? [edit: It seems so when I'm testing this now But I can't for example define local popup window with window.open(), because then, function that prints DOM won't find it.]

Originally posted by Stoen:

The script fails for non standard tags as seen in the hide-objects UserJS. The attributes collection for non standard tag seems to be undefined. Probably something that should be changed in that script though...

Getting computed styles for such elements is failing, but the DOM tree shows them (with attributes) here without problems. Or you are talking about something else?

I've updated the script. Now it also shows tag properties and methods in popup window (once again, I borrowed code from someone but I don't remember who ).
LiveDomViewer.js

Originally posted by d.i.z.:

Getting computed styles for such elements is failing, but the DOM tree shows them (with attributes) here without problems. Or you are talking about something else?

The script fails on this line

if (node.childNodes[[b][/b]i].attributes[j].specified) {

Its not the whole collection that is undefined, it says the length of the attributes collection for the custom element as found in hide-objects is 1. But attributes[0] is undefined and the script then fails at the above line.

Edit: Any custom element with a style attribute will result in the same thing. Otherwise custom elements work as you described

Originally posted by Stoen:

Originally posted by d.i.z.:

Getting computed styles for such elements is failing, but the DOM tree shows them (with attributes) here without problems. Or you are talking about something else?

The script fails on this line

if (node.childNodes[[b][/b]i].attributes[j].specified) {

Its not the whole collection that is undefined, it says the length of the attributes collection for the custom element as found in hide-objects is 1. But attributes[0] is undefined and the script then fails at the above line.

Edit: Any custom element with a style attribute will result in the same thing. Otherwise custom elements work as you described

I see now. Quick fix could look like this:

if (node.childNodes[i].attributes[j] && node.childNodes[i].attributes[j].specified) {

although this is dirty fix as it will skip some attributes. I'm not really into this problem but it looks like it may be an Opera bug. Or maybe it's because we try to use custom tags in HTML which (I guess) is illegal?

I'm sorry but this script shows some completly unrelated data while clicking on tag names. Trying to fix it now.

Ok, I fixed this script.
Now it shows computed styles inline (which can get painfully slow because of 'overflow: auto' btw. )

Oh, and whole script is in one anonymous function (it was possible it seems )

Can someone tell me, which method is generally faster - innerHTML or DOM compliant element creation?

It's here and in first post:
LiveDomViewer.js

Hey DIZ, this is cool Thanks..

Thanks for great UserJS-addon.

Originally posted by d.i.z.:

Can someone tell me, which method is generally faster - innerHTML or DOM compliant element creation?

DOM compliant element creation of course, but you'll have to work over a document fragment otherwise doing dom tree operation will force re-flows which can drastically slow down the code.

BTW, there is also something that can be done: Cloning nodes instead of creating new ones, but I am not sure if it is faster on Opera, it is said to be faster on some browser, you need to check it for yourself:
http://verens.com/archives/2006/01/09/clonenode-caching/

Some say that innerHTML is faster

Is there a way to get this script to work on xhtml or xml pages that dont support document.write?

Originally posted by Stoen:

Is there a way to get this script to work on xhtml or xml pages that dont support document.write?

Do you have some to URI to xhtml or xml document?

Originally posted by d.i.z.:

Some say that innerHTML is faster

I did my own testing, but unlike quirksmode testing which creates the html and renders it, my script continuously appended pieces of HTML to the dom tree, becoming slower and slower as the html grew, while dom methods always spent the same amount of time.

xErath, that's a nice finding, so there's probably a limit where dom methods start to benefit. And a dom tree has quite many number of items so it probably should. Also, cloneNode may be an option, but it is said that it does not speed things up in Opera.