Question

我一直在寻找一个好的DOM对象图供javascript使用我知道搜索javascript DOM object diagram会提供很多，就像这个看起来很清楚的那样：

enter image description here

你们中的任何人都有一个在DOM和javascript之间显示更完整关系的人吗？

Answer 1

给出DOM树的一小部分：

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

即使您只保留属性（没有方法），也只保留指向Node的属性（没有属性，样式，没有文本或数字属性），请排除特定于HTML的API（例如您的API）图）并省略了一些属性，你仍然会得到一个复杂的图表（原谅我糟糕的graphviz技能）：

enter image description here

（此处的框是对象，在其派生的DOM接口名称后面标记，边标记在属性之后）。

为不同类别的DOM API生成几个“备忘单”可能会很有趣，但您可以详细说明为什么以及在什么情况下您所讨论的图表是有用的。

我自己，我找到了developer.mozilla.org's DOM reference，相关规范以及jQuery的http://docs.jquery.com。

P.S。 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}

}

Answer 2

在本机JavaScript中，您只能使用XML DOM属性：

parentNode
nextSibling
previousSibling
则firstChild
lastChild
节点名称
的nodeValue
的childNodes
属性

由于属性很少且有限，因此实际上不需要图表。如果您需要在相对节点访问中具有高度的特异性和控制权，您可能希望查看XPath。

Answer 3

如果您想了解DOM公开的接口，请阅读DOM Specification

简要概述document是Document的一个实例，你基本上都是从那里开始的。

Javascript DOM对象图

3 个答案: