Geek Answers Handbook

Javascript DOM Object Diagram

I was looking for a good diagram of DOM objects that javascript will use.
I know that a javascript DOM object diagram search gives a lot of them, like this one that seems very clear:

enter image description here

Do any of you have a more complete connection between DOM and javascript?

+8
javascript dom diagram
source share
3 answers

Given the very small part of the DOM tree:

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

Even if you leave only properties (without methods) and only those properties that point to Node (without attributes, styles, no text or numeric properties), exclude HTML-specific APIs (for example, in your diagram) and omit some properties, you still get a complicated diagram (sorry my bad GUI skills):

enter image description here

(here the fields are objects marked after their DOM interface name itself, the edges are marked after the properties).

It may be interesting to create several cheat sheets for different categories of the DOM API, but you could elaborate more on why and in what situations the diagram you are talking about will be useful.

I myself find a description of the .mozilla.org DOM developer , relevant specifications and http://docs.jquery.com for jQuery are enough.

PS the source of the graphviz chart 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} }
+4
source share

In native JavaScript, you are limited by the XML DOM properties:

  • Parentnode
  • Nextsibling
  • PreviousSibling
  • Firstchild
  • Lastchild
  • NODENAME
  • nodeValue
  • Childnodes
  • attributes

Since there are few and limited properties, there really is no need for a diagram. If you need a high degree of specificity and control in relative node access, you can look at XPath.

+1
source share

If you want to know about the interfaces open by the DOM, read the DOM Specification

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

+1
source share

More articles:


All Articles