分享程序员开发的那些事...
更新时间：2023-12-05 14:56:46
给出一小部分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}
}