-
Notifications
You must be signed in to change notification settings - Fork 2.9k
/
DOMTree.html
332 lines (296 loc) · 12.5 KB
/
DOMTree.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="Interactive diagram showing the structure of the HTML DOM of this HTML page, allowing collapsing/expanding of subtrees." />
<meta itemprop="description" content="Interactive diagram showing the structure of the HTML DOM of this HTML page, allowing collapsing/expanding of subtrees." />
<meta property="og:description" content="Interactive diagram showing the structure of the HTML DOM of this HTML page, allowing collapsing/expanding of subtrees." />
<meta name="twitter:description" content="Interactive diagram showing the structure of the HTML DOM of this HTML page, allowing collapsing/expanding of subtrees." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
<meta itemprop="name" content="DOM Tree" />
<meta property="og:title" content="DOM Tree" />
<meta name="twitter:title" content="DOM Tree" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/DOMTree.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/DOMTree.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/DOMTree.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/DOMTree.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/DOMTree.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
DOM Tree | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="../release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
var names = {}; // hash to keep track of what names have been used
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
initialAutoScale: go.AutoScale.UniformToFill,
// define the layout for the diagram
layout: new go.TreeLayout({
nodeSpacing: 5,
layerSpacing: 30,
arrangement: go.TreeArrangement.FixedRoots
})
});
// Define a simple node template consisting of text followed by an expand/collapse button
myDiagram.nodeTemplate = new go.Node('Horizontal', {
selectionChanged: nodeSelectionChanged
}) // this event handler is defined below
.add(
new go.Panel('Auto')
.add(
new go.Shape({ fill: '#1F4963', stroke: null }),
new go.TextBlock({
font: 'bold 13px Helvetica, bold Arial, sans-serif',
stroke: 'white',
margin: 3
}).bind('text', 'key')
),
go.GraphObject.build('TreeExpanderButton')
);
// Define a trivial link template with no arrowhead.
myDiagram.linkTemplate = new go.Link({ selectable: false })
.add(
new go.Shape()
); // the link shape
// create the model for the DOM tree
myDiagram.model = new go.TreeModel({
isReadOnly: true, // don't allow the user to delete or copy nodes
// build up the tree in an Array of node data
nodeDataArray: traverseDom(document.activeElement)
});
}
// Walk the DOM, starting at document, and return an Array of node data objects representing the DOM tree
// Typical usage: traverseDom(document.activeElement)
// The second and third arguments are internal, used when recursing through the DOM
function traverseDom(node, parentName, dataArray) {
if (parentName === undefined) parentName = null;
if (dataArray === undefined) dataArray = [];
// skip everything but HTML Elements
if (!(node instanceof Element)) return;
// Ignore the navigation menus
if (node.id === 'navSide' || node.id === 'navTop') return;
// add this node to the nodeDataArray
var name = getName(node);
var data = { key: name, name: name };
dataArray.push(data);
// add a link to its parent
if (parentName !== null) {
data.parent = parentName;
}
// find all children
var l = node.childNodes.length;
for (var i = 0; i < l; i++) {
traverseDom(node.childNodes[i], name, dataArray);
}
return dataArray;
}
// Give every node a unique name
function getName(node) {
var n = node.nodeName;
if (node.id) n = n + ' (' + node.id + ')';
var namenum = n; // make sure the name is unique
var i = 1;
while (names[namenum] !== undefined) {
namenum = n + i;
i++;
}
names[namenum] = node;
return namenum;
}
// When a Node is selected, highlight the corresponding HTML element.
function nodeSelectionChanged(node) {
if (node.isSelected) {
names[node.data.name].style.backgroundColor = 'lightblue';
} else {
names[node.data.name].style.backgroundColor = '';
}
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<!-- The DIV needs an explicit size or else we won't see anything. -->
<div
id="myDiagramDiv"
style="border: 1px solid black; width: 100%; height: 300px"></div>
<p>
This sample shows the DOM (Document Object Model) of this webpage displayed
as a tree. Each Node in the Diagram shows information about the
corresponding HTML element in the DOM.
</p>
<p>
When a node is selected, the background color of the corresponding HTML
Element changes to lightblue. Below the diagram are some more HTML elements
to illustrate the effect. This sample also makes use of the
<a href="../intro/buttons.html" target="_blank">TreeExpanderButton</a>,
which allows for parent nodes to expand and collapse their child nodes.
Buttons are defined in <a href="../extensions/Buttons.js">Buttons.js</a>.
</p>
<p id="lastParagraph">
Elements with an id attribute are noted in parenthesis.
</p>
<div id="otherInfo">
<div id="tableContainer" style="display: inline-block">
<table style="border: 1px; border-collapse: collapse">
<tr>
<th id="firstHeader">Table header</th>
<th id="secondHeader">Table header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</div>
<div
id="listContainer"
style="
display: inline-block;
border: 1px solid gray;
margin-left: 10px;
padding: 4px;
">
<p>My grocery list</p>
<ul id="groceryList">
<li>Coffee</li>
<li>Milk</li>
<li>Bread</li>
</ul>
</div>
<p>
For more uses of the <a>TreeLayout</a> see the
<a href="DOMTree.html">DOM Tree</a> and
<a href="visualTree.html">Visual Tree</a> samples.
</p>
</div>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Tree Layout</h4>
<p>
This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns).
For discussion and examples of the most commonly used properties of the <a href="../api/symbols/TreeLayout.html">TreeLayout</a>,
see the <a href="../intro/trees.html">Trees</a> page in the Introduction.
More information can be found in the <a href="../intro/layouts.html#TreeLayout">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#treelayout">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Buttons</h4>
<p>
GoJS defines several <a href="../api/symbols/Panel.html" target="api">Panel</a>s for common uses.
These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton".
"ContextMenuButton"s are typically used inside of "ContextMenu" Panels;
"CheckBoxButton"s are used in the implementation of "CheckBox" Panels.
</p>
<p>
These predefined panels can be used as if they were <a href="../api/symbols/Panel.html" target="api">Panel</a>-derived classes in calls to <a href="../api/symbols/GraphObject.html#make" target="api">GraphObject.make</a>.
They are implemented as simple visual trees of <a href="../api/symbols/GraphObject.html" target="api">GraphObject</a>s in <a href="../api/symbols/Panel.html" target="api">Panel</a>s,
with pre-set properties and event handlers.
</p>
<p>
More information can be found in the <a href="../intro/buttons.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#buttons">Related samples</a>
</p>
<hr>
</div>
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>