-
Notifications
You must be signed in to change notification settings - Fork 4
/
dom_tree.html
91 lines (78 loc) · 2.71 KB
/
dom_tree.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
<!DOCTYPE html>
<html>
<head>
<title>Adobe</title>
</head>
<body>
<h1 id="heading">Introduction to DOM</h1>
<h1>Products</h1>
<table id="products" border="1">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var products = [
{ "id": 1, "name": "iPhone", "price": 124447.44, "category": "mobile" },
{ "id": 2, "name": "Onida", "price": 4444.44, "category": "tv" },
{ "id": 3, "name": "OnePlus 6", "price": 98444.44, "category": "mobile" },
{ "id": 4, "name": "HDMI connector", "price": 2444.00, "category": "computer" },
{ "id": 5, "name": "Samsung", "price": 68000.00, "category": "tv" }
];
// traverse thro products and create one <tr> for one product with <td> having
// name, price and categeory
var tbody = document.querySelector("#products tbody");
products.forEach(p => {
var tr = document.createElement("tr");
var td = document.createElement("td");
td.textContent = p.name;
tr.append(td);
td = document.createElement("td");
td.textContent = p.price;
tr.append(td);
td = document.createElement("td");
td.textContent = p.category;
tr.append(td);
tbody.append(tr);
});
</script>
<p>
When loading a web page, a browser creates a DOM of the page, which is an application programming interface
(API) that represents an HTML, XHTML, or XML document as a tree structure.
</p>
<p>
In the DOM, the contents of an HTML document are organized into a tree structure, called the DOM tree. The DOM
tree consists of nodes, which can represent HTML elements, text, or comments.
</p>
<img src="./images_dom/house.jpg" width="300px" />
<h2>Hobbies</h2>
<ul id="hobby-list">
<li class="hobby">Playing Chess</li>
<li class="hobby">Reading books</li>
</ul>
<h2>Programming Languages</h2>
<ul id="lang">
<li class="programming">C</li>
<li class="programming">C++</li>
<li class="programming">Java</li>
<li class="programming">JavaScript</li>
</ul>
<h2>Planets</h2>
<ul id="planets">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</body>
</html>