Javascript DOM 对象图答案

【问题标题】：Javascript DOM object diagramJavascript DOM 对象图
【发布时间】：2012-01-07 07:47:52
【问题描述】：

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

你们中的任何人都可以显示 DOM 和 javascript 之间更完整的关系吗？

【问题讨论】：

DOM 和 JavaScript 的关系？你的意思是说 x,y,z 的 parentNode 吗？
@austincheney 就是这样！在一张图中显示 DOM 以及通过 javascript (ECMAscript) 引用其元素的方法。
+1 我正在寻找同样的东西。 JS 可以访问的完整列表。
但是每个页面都有自己独特的 DOM 结构。 MDN Gecko DOM Reference 是查找不同节点类型属性信息的好地方。在旧的“Blooberry”网站上有点古老的element tree 也有点有趣，虽然过时了。

【解决方案1】：

给定 DOM 树的一小部分：

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

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

（这里的盒子是对象，在它们最派生的 DOM 接口名称之后标记，边缘在属性之后标记）。

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

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

附：如果有人需要，请提供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}

}

【讨论】：

【解决方案2】：

在原生 JavaScript 中，您仅限于 XML DOM 属性：

父节点
下一个兄弟
上一页兄弟
第一个孩子
最后一个孩子
节点名称
节点值
子节点
属性

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

【讨论】：

如果人们谈论的是 HTML 文档的 DOM，这根本不是真的（鉴于问题中的图表，情况似乎如此）。
Element 上的属性要多得多
还有一些不属于 DOM 规范的属性，比如 scrollHeight 和 clientHeight 等等。列出的属性是标准 DOM 中可用的属性。
@austincheney Node 有更多。即ownerDocument、textContent、nodeType 等。Element 还有一大堆。
@Raynos 可能，但问题是关于 DOM，而不是关于 DOM 之外的事实属性。

【解决方案3】：

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

简要说明document 是Document 的一个实例，您基本上可以从那里开始。

【讨论】：

在图表中有简历会很棒。如果没有像 anubhav-saini 所说的那样完成至少一个Full list of what JS can access。
@NomikOS 我可能会画出这样一个完整的列表。这是一项非常耗时的任务。
+1 是的，正如您在奥斯汀切尼的回答中评论的那样，所以忘记Full list...。如您所见，这个问题似乎也被其他用户共享。我认为需要一个图表，我们可以看到 js 如何与 DOM 交互。就是那个问题。应该提到像parentNode 和nextSibling 这样的属性。谢谢！