-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdom_path.html
More file actions
104 lines (82 loc) · 2.74 KB
/
Copy pathdom_path.html
File metadata and controls
104 lines (82 loc) · 2.74 KB
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
<!DOCTYPE html>
<html>
<head>
<!--
After the user clicks on something in the web page
the DOM path is shown, from the top node (the root)
downwards.
-->
<title>DOM Path</title>
<script>
// Repeatedly go up the DOM structure
function handleClick(event) {
event.stopPropagation();
var node = event.target
var thisPath = node.nodeName;
while (node.parentNode) {
node = node.parentNode;
thisPath = node.nodeName + " > " + thisPath;
}
alert(thisPath);
}
// Register the click event handler for all nodes
function attachHandler(node) {
if (node == null) return;
node.onclick = handleClick;
for (var i = 0; i < node.childNodes.length; ++i) {
visit(node.childNodes[i]);
}
}
// Register the click event handler for the links and form elements
function init() {
attachHandler(document.getElementsByTagName("body")[0]);
}
//
</script>
</head>
<body onload="init()">
<p>Click on the link or form elements to see the DOM path to that node</p>
<p>(The html that you see below is just some 'random' html which helps to demonstrate the technique).</p>
<b>LISTS</b>
<ul>
<li><a href="">List 1</a></li>
<li><a href="">List 2</a></li>
<li><a href="">List 3</a></li>
<li><a href="">List 4</a>
<ol>
<li><a href="">Order List 1</a></li>
<li><a href="">Order List 2</a></li>
<li><a href="">Order List 3</a></li>
<li><a href="">Order List 4</a></li>
</ol>
</li>
</ul>
<p><b>TABLES</b></p>
<table border="3">
<tbody>
<tr>
<td><a href="">Cell 1</a></td>
<td><a href="">Cell 2</a></td>
<td><a href="">Cell 3</a></td>
<td><a href="">Cell 4</a></td>
</tr>
<tr>
<td colspan="4">
<form>
<table border="1">
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="button" value="Click!"></td>
<td><input type="checkbox"></td>
<td><input type="radio"></td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>