Javascript DOM对象图
Igo*_*rra 9 javascript diagram dom
我一直在寻找一个好的DOM对象图供javascript使用.
我知道搜索javascript DOM object diagram提供了很多,就像这个看起来非常清楚:
你们中的任何人都有一个在DOM和javascript之间显示更完整关系的人吗？
给定 DOM 树的一小部分：
<html>
|
+-- <head>
| |
| +...
|
+-- #text
|
+-- <body>
|
+...
即使您仅保留属性（无方法）和仅指向Nodes 的属性（无属性、样式、无文本或数字属性）、排除特定于 HTML 的 API（例如图表上的 API）并省略一些属性，您也可以仍然会得到一个复杂的图表（请原谅我糟糕的 graphviz 技能）：
（这里的盒子是对象，在其最衍生的 DOM 接口名称之后标记，边缘在属性之后标记）。
为不同类别的 DOM API 生成几个“备忘单”可能很有趣，但是您可以详细说明为什么以及在什么情况下您所讨论的图表有用。
我自己，我找到了developer.mozilla.org 的DOM 参考、相关规范以及http://docs.jquery.com的jQuery 就足够了。
PS graphviz 图的来源，以防有人需要它：
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}
}