Javascript DOM对象图 [英] Javascript DOM object diagram
问题描述
我一直在寻找一个可以被javascript使用的DOM对象图。
我知道搜索 javascript DOM对象图可以得到很多，就像这样看起来很清晰：
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:
你们中有谁能显示DOM和javascript之间更完整的关系？
Any of you have one that shows a more complete relationship between DOM and javascript?
推荐答案
给出一小部分DOM树：
Given a very small portion of a DOM tree:
<html>
|
+-- <head>
| |
| +...
|
+-- #text
|
+-- <body>
|
+...
即使只留下属性（没有方法），也只有那些属性指向 Node s的属性（无属性，样式，无文本或数字属性），排除特定于HTML的API（例如图表中的API），并省略了一些属性，您仍然会得到一个复杂的图表（对不起，我的graphviz技能很差）：
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):
（这里的框是对象，在其最派生的DOM接口名称之后标记，边缘在属性之后标记）。
(here boxes are objects, labeled after their most derived DOM interface name, edges are labeled after properties).
为不同类别的DOM API生成几个备忘单可能很有趣，但是您可以详细说明为什么以及在什么情况下要讨论的图表有用。
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.
我自己，我发现开发人员.mozilla.org的DOM参考，相关规范，并且 http://docs.jquery.com 对于jQuery足够。
Myself, I find the developer.mozilla.org's DOM reference, the relevant specifications, and http://docs.jquery.com for jQuery enough.
PS graphviz图的源，以防万一有人需要它：
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}
}
这篇关于Javascript DOM对象图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
