Menu
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?
780
The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
The DOM is separated into three parts: Core, HTML, and XML.
Using DOM, JavaScript can perform multiple tasks. It can create new elements and attributes, change the existing elements and attributes and even remove existing elements and attributes. JavaScript can also react to existing events and create new events in the page.
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:
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.
25
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
