Javascript DOM object diagram

I have been searching for a good DOM object diagram to be used by javascript.
I know that a search for javascript DOM object diagram gives a lot of them, like this one that seems very clear:

Any of you have one that shows a more complete relationship between DOM and javascript?

回答1:

Given a very small portion of a DOM tree:

<html>
 |
 +-- <head>
 |     |
 |     +...
 |
 +-- #text
 |
 +-- <body>
       |
       +...

Even if you leave only properties (no methods) and only those properties that point to Nodes (no attributes, styles, no text or number properties), exclude HTML-specific APIs (such as those on your diagram) and omit some properties, you'll still get a complicated diagram (excuse my poor graphviz skills):

(here boxes are objects, labeled after their most derived DOM interface name, edges are labeled after properties).

It might be interesting to produce several "cheat sheets" for different categories of DOM APIs, but you could elaborate more on why and in what situations would the diagram you're talking about be useful.

Myself, I find the developer.mozilla.org's DOM reference, the relevant specifications, and http://docs.jquery.com for jQuery enough.

P.S. the source for the graphviz diagram in case someone needs it:

digraph {   //rankdir=LR;
//  size="30,10";
node [shape="rect"];
Window -> Document [label="document"];
Document -> Window [label="defaultView"];
Document -> "Element (<html>)" [label="documentElement"];
"Element (<html>)" -> Document [label="ownerDocument"];

html [label="Element (<html>)"];
head [label="Element (<head>)"];
textBetweenHeadBody [label="Text"];
body [label="Element (<body>)"];

html -> head [label="firstChild,\nchildNodes[0]\nchildren[0]"];
head -> html [label="parentNode" color=grey fontcolor=grey];
html -> textBetweenHeadBody [label="childNodes[1]"];
html -> body [label="lastChild\nchildNodes[2]\nchildren[1]"];
body -> html [label="parentNode" color=grey fontcolor=grey];

head -> textBetweenHeadBody [label="nextSibling"];
textBetweenHeadBody -> head [label="previousSibling"];
textBetweenHeadBody -> body [label="nextSibling"];
body -> textBetweenHeadBody [label="previousSibling"];

head -> body [label="nextElementSibling\npreviousElementSibling" fontcolor="blue" color="blue" dir=both];
//body -> head [label=""];


{rank=same; head textBetweenHeadBody body}

}

回答2:

In native JavaScript you are limited to the XML DOM properties:

parentNode
nextSibling
previousSibling
firstChild
lastChild
nodeName
nodeValue
childNodes
attributes

Since the properties are few and limited there is not really any need for a diagram. If you need a high degree of specificity and control in relative node access you may wish to look at XPath.

回答3:

If you want to know about the interfaces exposed by the DOM then read the DOM Specification

A brief outline is that document is an instance of Document and you basically go from there.