Диаграмма объектов Javascript DOM - PullRequest
Новая
       11

Диаграмма объектов Javascript DOM

8 голосов
/ 27 ноября 2011

Я искал хорошую диаграмму объектов DOM для использования в javascript.
Я знаю, что поиск по javascript DOM object diagram дает много таких, как этот, который кажется очень ясным:

enter image description here

Кто-нибудь из вас демонстрирует более полную связь между DOM и javascript?

Ответы [ 3 ]

4 голосов
/ 28 ноября 2011

Учитывая очень маленькую часть дерева DOM: 

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

Даже если вы оставите только свойства (без методов) и только те свойства, которые указывают на Node s (без атрибутов, стилей, неттекстовые или числовые свойства), исключая специфичные для HTML API (например, те, что на вашей диаграмме) и опуская некоторые свойства, вы все равно получите сложную диаграмму (извините, мои плохие навыки в графике):

enter image description here

(здесь поля - это объекты, помеченные после их самого производного имени интерфейса DOM, ребра помечены после свойств).

Может быть интересно создать несколько «шпаргалок» для различных категорий API DOM, но вы могли бы подробнее рассказать о том, почему и в каких ситуациях будет полезна диаграмма, о которой вы говорите.

Сам я нахожу справку DOM developer.mozilla.org , соответствующуюспецификации и 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}

}
1 голос
/ 27 ноября 2011

Если вы хотите узнать об интерфейсах, предоставляемых DOM, прочитайте Спецификацию DOM

. Краткое описание: document является экземпляром Document и вы в основном идете оттуда.

1 голос
/ 27 ноября 2011

В нативном JavaScript вы ограничены свойствами XML DOM:

  • ParentNode
  • NextSibling
  • PreviousSibling
  • FirstChild
  • LastChild
  • NODENAME
  • nodeValue
  • ChildNodes
  • атрибуты

Поскольку свойства немногочисленны и ограничены, в диаграмме нет необходимости. Если вам нужна высокая степень специфичности и контроля в относительном доступе к узлу, вы можете обратиться к XPath.

...