-
Notifications
You must be signed in to change notification settings - Fork 0
/
dom.html
260 lines (241 loc) · 12 KB
/
dom.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
---
layout: default
title: JavaScript Basics Tutorial
custom_css: js_dom
---
<button id="openbtn" class="openbtn" onclick="openNav()">☰</button>
<!-- top menu -->
<div class="container border-2-secondary">
<div class="row">
<div class="col-md-7 content-box" id="content">
<h1 id="dom">JavaScript DOM Manipulation</h1>
<p>In this page, we'll learn how to manipulate the DOM using plain JavaScript.</p>
<h4>General steps for doing DOM manipulation:</h4>
<ol>
<li>Select the element(s) you want to manipulate using one of the selection methods like <strong>getElementById</strong>, <strong>getElementsByClassName</strong>, <strong>getElementsByTagName</strong>, <strong>querySelector</strong>, or <strong>querySelectorAll</strong>.</li>
<li>Use a method or property to manipulate the selected element(s). Common methods and properties include <strong>innerHTML</strong>, <strong>textContent</strong>, <strong>setAttribute</strong>, <strong>style</strong>, and <strong>classList</strong>.</li>
<li>Use event listeners to detect when the user interacts with the page, such as clicking a button or scrolling the mouse. Common event listeners include <strong>click</strong>, <strong>submit</strong>, <strong>keydown</strong>, and <strong>scroll</strong>.</li>
<li>Write JavaScript code to handle the events and perform the desired actions. This can include changing the content of the page, adding or removing elements, or updating the style.</li>
</ol>
<!-- Your tutorial content here -->
<div class="example">
<h2>Example 1: Changing Text Content</h2>
<p>Click the button to change the text content of the paragraph:</p>
<p id="example1">This is a sample paragraph.</p>
<button class="exbtn btn btn-primary" onclick="changeText()">Change Text</button>
<script>
function changeText() {
var ele = document.getElementById("example1");
ele.innerText = 'The text content has been changed.';
}
</script>
<!-- accordian -->
<button class="accordion"><strong>Check Code here</strong></button>
<div class="hidden-panel">
<div id="example-panel">
<code><button onclick="changeText()">Change Text</button><br><p id="example1">This is some text.</p></code>
<br>
<code>
<script><br>
function changeText() {<br>
var para = document.getElementById("example1");<br>
para.innerText = 'The text content has been changed.';<br>
}
</script><br>
</code>
</div>
</div>
<h4>Try it Yourself</h4>
<p>Apply bold and italics to the text of the paragraph using <strong>innerHTML</strong> instead of <strong>innerText</strong>.</p>
</div>
<div class="example">
<h2>Example 2: Changing Styling</h2>
<p>Click the button to change the background color of the paragraph:</p>
<p id="example2">This is another sample paragraph.</p>
<button class="exbtn btn btn-primary" onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
var para = document.getElementById("example2");
para.style.backgroundColor = "yellow";
}
</script>
<!-- accordian -->
<button class="accordion"><strong>Check Code here</strong></button>
<div class="hidden-panel">
<div id="example-panel">
<code><button onclick="changeStyle()">Change Style</button><br><p id="example2">This is another sample paragraph.</p></code>
<br>
<code>
<script><br>
function changeStyle() {<br>
var para = document.getElementById("example2");<br>
para.style.backgroundColor = "yellow";<br>
}
</script><br>
</code>
</div>
</div>
<h4>Try it Yourself</h4>
<p>Apply red solid border around the paragraph.</p>
<!-- accordian -->
<button class="accordion"><strong>Some examples of the most commonly used CSS styling functions</strong></button>
<div class="hidden-panel">
<ul>
<li><strong>element.style.property:</strong> sets or gets the value of a CSS property for an element</li>
<li><strong>element.classList.add():</strong> adds a class name to an element</li>
<li><strong>element.classList.remove():</strong> removes a class name from an element</li>
<li><strong>element.classList.toggle():</strong> toggles a class name on an element. <strong>toggle()</strong> is a method in JavaScript that can be used to toggle between adding and removing a specified class from an element.</li>
<li><strong>window.getComputedStyle():</strong> returns the computed style of an element <p>Computed style is a property of a DOM element in JavaScript that represents the final computed values of all CSS properties applied to the element, after taking into account any styles inherited from parent elements and any styles applied by CSS rules. It is accessed using the <strong>window.getComputedStyle()</strong> method.</p></li>
</ul>
<div id="example-panel"><code>
let myDiv = document.getElementById('my-div');<br>
myDiv.style.backgroundColor = 'blue';<br>
myDiv.classList.add('my-class');<br>
myDiv.classList.remove('my-class');<br>
myDiv.classList.toggle('my-class');<br>
let myStyle = window.getComputedStyle(myDiv);<br>
console.log(myStyle.backgroundColor);</code>
</div>
</div>
</div>
<div class="example">
<h2>Example 3: Creating Elements</h2>
<p>Click the button to create a new paragraph:</p>
<button class="exbtn btn btn-primary" onclick="createParagraph()">Create Paragraph</button>
<script>
function createParagraph() {
var p = document.createElement("p");
var text = document.createTextNode("This is a newly created paragraph.");
p.appendChild(text);
var button = document.getElementsByClassName("exbtn")[2];
var parent = button.parentNode;
parent.insertBefore(p, button);
}
</script>
<!-- accordian -->
<button class="accordion"><strong>Check Code here</strong></button>
<div class="hidden-panel">
<div id="example-panel" class="create-para">
<code><button onclick="createParagraph()">Click me</button></code>
<br>
<code>
<script><br>
function createParagraph() {<br>
var p = document.createElement("p");<br>
var text = document.createTextNode("This is a newly created paragraph.");<br>
var button = document.getElementsByClassName("exbtn")[2];<br>
button.parentNode.insertBefore(p, button); } </script><br>
</code>
</div>
</div>
<h4>Try it Yourself</h4>
<p>Create a DIV and add a child Paragraph under it.</p>
<!-- accordian -->
<button class="accordion"><strong>Some examples of the most commonly used DOM functions</strong></button>
<div class="hidden-panel">
<ul>
<li><strong>document.createElement():</strong> creates a new HTML element</li>
<li><strong>element.appendChild():</strong> adds a child element to another element</li>
<li><strong>element.innerHTML:</strong> sets or gets the inner HTML of an element</li>
<li><strong>element.setAttribute():</strong> sets the value of an attribute for an element</li>
<li><strong>element.style.property:</strong> sets or gets the value of a CSS property for an element</li>
<li><strong>parent.insertBefore(p, button);</strong> The <strong>parent</strong> is a variable that represents the parent element of <strong>button</strong>. The method <strong>insertBefore()</strong> takes two arguments: the first argument <strong>p</strong> is the element to be inserted, and the second argument <strong>button</strong> is the element before which <strong>p</strong> will be inserted.</li>
</ul>
<div id="example-panel"><code>
let myDiv = document.createElement('div');<br>
myDiv.innerHTML = '<strong>Hello World!</strong>';<br>
myDiv.setAttribute('id', 'my-div');<br>
myDiv.style.color = 'red';<br>
document.body.appendChild(myDiv);<br>
parent.insertBefore(p, button);
</code>
</div>
</div>
</div>
<div class="example">
<h2>Example 4: Looping through Elements</h2>
<p id="example4">Click the button to change the text of all paragraphs:</p>
<p class="para">This is the first paragraph.</p>
<p class="para">This is the second paragraph.</p>
<p class="para">This is the third paragraph.</p>
<button class="exbtn btn btn-primary" onclick="changeAllParagraphs()">Change Text</button>
<script>
function changeAllParagraphs() {
var paragraphs = document.getElementsByClassName("para");
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].innerText = "This text has been changed.";
}
}
</script>
<!-- accordian -->
<button class="accordion"><strong>Check Code here</strong></button>
<div class="hidden-panel">
<div id="example-panel">
<code><button onclick="changeAllParagraphs()">Change Text</button></code>
<br>
<code>
<script><br>
function changeAllParagraphs() {<br>
var paragraphs = document.getElementsByClassName("para");<br>
for (var i = 0; i < paragraphs.length; i++) {<br>
paragraphs[i].innerText = "This text has been changed.";<br>
} <br>
} </script><br>
</code>
</div>
</div>
<h4>Try it Yourself</h4>
<p>Change color of all buttons to green.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
for (let i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</div>
</div>
<div class="col-md-5 code-box w-100">
<div class="container-fluid">
<div id="code-panel">
<textarea id="code" class="form-control" placeholder="Enter HTML, CSS, JS code here"></textarea>
</div>
<div id="output-panel">
<iframe id="output" width="100%"></iframe>
</div>
</div>
</div>
</div>
<footer class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Learn Web Dev</a>
<div class="container footer-text text-white">
© 2023 Made with 🤍 by Vikas Bandaru
</div>
</footer>
</div>
<script>
function updateOutput() {
var code = document.getElementById("code").value;
var output = document.getElementById("output").contentWindow.document;
output.open();
output.writeln(code);
output.close();
}
var codeTextarea = document.getElementById("code");
codeTextarea.addEventListener("input", updateOutput);
updateOutput();
</script>
<!-- Up Arrow Image -->
<a href="#top" id="up-arrow"><img class="uparrow"
src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-512.png" alt="Up Arrow"></a>