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?
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}
}
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.
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.
来源：https://stackoverflow.com/questions/8285895/javascript-dom-object-diagram