Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Add Advanced DOM Topics to JavaScript Tutorial #1

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add Advanced DOM Topics to JavaScript Tutorial #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0d30758
Add advanced DOM manipulation examples: create, append, remove elemen…
mejbaulmubin786 Dec 27, 2024
eaa18d9
Dynamic DOM Manipulation is complite
mejbaulmubin786 Jan 3, 2025
3e80f69
Remove class is added
mejbaulmubin786 Jan 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,897 changes: 1,627 additions & 1,270 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

81 changes: 81 additions & 0 deletions _examples_javascript_beginners/15. DOM (Advanced)/15.01.01.js.dom.AppendingElements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>15.DOM.Advanced.html</title>

<!-- internal style -->
<style>
/* css selector: { property:value; } */
body {
font-family: arial;
}
</style>
</head>

<body>
<div class="container">
<div class="sub-container">
<h1 class="heading-text" id="mainHeadingText">
<font>15. DOM (Advanced)</font>
</h1>

<h2 class="sub-heading-text" id="subHeadingText">
15.01. Dynamic DOM Manipulation
</h2>
<ul>
<li class="list-item">
Dynamic DOM manipulation involves creating, modifying, and deleting
elements and their attributes in real-time using JavaScript.
</li>
<li class="list-item">
Common methods include `createElement()`, `appendChild()`,
`removeChild()`, and `replaceChild()`.
</li>
<li class="list-item">
Developers can add interactivity and dynamic content to web pages by
manipulating the DOM tree.
</li>
</ul>

<h2>15.02. Class Manipulation</h2>
<ul>
<li>
JavaScript provides methods to manipulate CSS classes for elements
dynamically.
</li>
<li>
Methods like `classList.add()`, `classList.remove()`,
`classList.toggle()`, and `classList.contains()` are commonly used
for class manipulation.
</li>
<li>
Class manipulation helps in controlling element styles and behavior
programmatically.
</li>
</ul>

<h2>15.03. Handling Forms and Input Fields</h2>
<ul>
<li>
DOM provides methods to interact with forms and input fields, making
it easy to capture, validate, and process user inputs.
</li>
<li>
Commonly used methods include `getElementById()`, `querySelector()`,
and event listeners like `onchange`, `onsubmit`, and `onclick`.
</li>
<li>
Dynamic form handling can be achieved by modifying the `value`,
`checked`, and `selected` properties of input fields.
</li>
</ul>
</div>
</div>

<!-- include external JavaScript - body section -->
<script src="./15.01.01.script.js"></script>
</body>
</html>
21 changes: 21 additions & 0 deletions _examples_javascript_beginners/15. DOM (Advanced)/15.01.01.script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// Select the <ul> element
let ulElement = document.querySelector("ul");

// Create a new <li> element
let newParagraph = document.createElement("li");

// Add text content to the new <li> element
newParagraph.innerText =
"The DOM tree serves as a foundational structure that JavaScript can traverse and modify, enabling developers to construct intricate and dynamic web pages. (This is a dynamically created li element).";

// Append the new <li> to the <ul>
ulElement.appendChild(newParagraph);

// Create a new <span> element
let newSpan = document.createElement("span");

// Add text content to the <span> element
newSpan.innerText = " (Appended using a span element)";

// Append the <span> to the newly created <li>
newParagraph.appendChild(newSpan);
83 changes: 83 additions & 0 deletions _examples_javascript_beginners/15. DOM (Advanced)/15.01.02.js.dom.RemovingElements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>15.DOM.Advanced.html</title>

<!-- internal style -->
<style>
/* css selector: { property:value; } */
body {
font-family: arial;
}
</style>
</head>

<body>
<div class="container">
<div class="sub-container">
<h1 class="heading-text" id="mainHeadingText">
<font>15. DOM (Advanced)</font>
</h1>

<h2 class="sub-heading-text" id="subHeadingText">
15.01. Dynamic DOM Manipulation
</h2>
<ul>
<li class="list-item">First Item.</li>
<li class="list-item">
Dynamic DOM manipulation involves creating, modifying, and deleting
elements and their attributes in real-time using JavaScript.
</li>
<li class="list-item">
Common methods include `createElement()`, `appendChild()`,
`removeChild()`, and `replaceChild()`.
</li>
<li class="list-item">
Developers can add interactivity and dynamic content to web pages by
manipulating the DOM tree.
</li>
<li class="list-item">Last Item.</li>
</ul>

<h2>15.02. Class Manipulation</h2>
<ul>
<li>
JavaScript provides methods to manipulate CSS classes for elements
dynamically.
</li>
<li>
Methods like `classList.add()`, `classList.remove()`,
`classList.toggle()`, and `classList.contains()` are commonly used
for class manipulation.
</li>
<li>
Class manipulation helps in controlling element styles and behavior
programmatically.
</li>
</ul>

<h2>15.03. Handling Forms and Input Fields</h2>
<ul>
<li>
DOM provides methods to interact with forms and input fields, making
it easy to capture, validate, and process user inputs.
</li>
<li>
Commonly used methods include `getElementById()`, `querySelector()`,
and event listeners like `onchange`, `onsubmit`, and `onclick`.
</li>
<li>
Dynamic form handling can be achieved by modifying the `value`,
`checked`, and `selected` properties of input fields.
</li>
</ul>
</div>
</div>

<!-- include external JavaScript - body section -->
<script src="./15.01.02.script.js"></script>
</body>
</html>
8 changes: 8 additions & 0 deletions _examples_javascript_beginners/15. DOM (Advanced)/15.01.02.script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// Select the element to be removed
let ulElement = document.querySelector("ul");

// Select the last child element of the <ul> and remove it
ulElement.removeChild(ulElement.lastElementChild);

// Select the first child element of the <ul> and remove it using the newer remove() method
ulElement.firstElementChild.remove();
82 changes: 82 additions & 0 deletions _examples_javascript_beginners/15. DOM (Advanced)/15.01.03.js.dom.ReplacingElements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>15.DOM.Advanced.html</title>

<!-- internal style -->
<style>
/* css selector: { property:value; } */
body {
font-family: arial;
}
</style>
</head>

<body>
<div class="container">
<div class="sub-container">
<h1 class="heading-text" id="mainHeadingText">
<font>15. DOM (Advanced)</font>
</h1>

<h2 class="sub-heading-text" id="subHeadingText">
15.01. Dynamic DOM Manipulation
</h2>
<ul>
<li class="list-item">
Dynamic DOM manipulation involves creating, modifying, and deleting
elements and their attributes in real-time using JavaScript.
</li>
<li class="list-item">
Common methods include `createElement()`, `appendChild()`,
`removeChild()`, and `replaceChild()`.
</li>
<li class="list-item">
Developers can add interactivity and dynamic content to web pages by
manipulating the DOM tree.
</li>
<li class="list-item">This is the paragraph to be replaced.</li>
</ul>

<h2>15.02. Class Manipulation</h2>
<ul>
<li>
JavaScript provides methods to manipulate CSS classes for elements
dynamically.
</li>
<li>
Methods like `classList.add()`, `classList.remove()`,
`classList.toggle()`, and `classList.contains()` are commonly used
for class manipulation.
</li>
<li>
Class manipulation helps in controlling element styles and behavior
programmatically.
</li>
</ul>

<h2>15.03. Handling Forms and Input Fields</h2>
<ul>
<li>
DOM provides methods to interact with forms and input fields, making
it easy to capture, validate, and process user inputs.
</li>
<li>
Commonly used methods include `getElementById()`, `querySelector()`,
and event listeners like `onchange`, `onsubmit`, and `onclick`.
</li>
<li>
Dynamic form handling can be achieved by modifying the `value`,
`checked`, and `selected` properties of input fields.
</li>
</ul>
</div>
</div>

<!-- include external JavaScript - body section -->
<script src="./15.01.03.script.js"></script>
</body>
</html>
15 changes: 15 additions & 0 deletions _examples_javascript_beginners/15. DOM (Advanced)/15.01.03.script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Select the <ul> element
let ulElement = document.querySelector("ul");

// Create a new <li> element
let newListItem = document.createElement("li");

// Add text to the new <li> element
newListItem.textContent =
"The DOM tree serves as a foundational structure that JavaScript can traverse and modify, enabling developers to construct intricate and dynamic web pages.(This is the new replaced item.)";

// Select the child element to be replaced
let itemToReplace = ulElement.children[3]; // Replacing the 4th item (index starts at 0)

// Replace the old item with the new one
ulElement.replaceChild(newListItem, itemToReplace);
81 changes: 81 additions & 0 deletions _examples_javascript_beginners/15. DOM (Advanced)/15.02.01.js.dom.AddingClasses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>15.DOM.Advanced.html</title>

<!-- internal style -->
<style>
/* css selector: { property:value; } */
body {
font-family: arial;
}
</style>
</head>

<body>
<div class="container">
<div class="sub-container">
<h1 class="heading-text" id="mainHeadingText">
<font>15. DOM (Advanced)</font>
</h1>

<h2 class="sub-heading-text" id="subHeadingText">
15.01. Dynamic DOM Manipulation
</h2>
<ul>
<li class="list-item">
Dynamic DOM manipulation involves creating, modifying, and deleting
elements and their attributes in real-time using JavaScript.
</li>
<li class="list-item">
Common methods include `createElement()`, `appendChild()`,
`removeChild()`, and `replaceChild()`.
</li>
<li class="list-item">
Developers can add interactivity and dynamic content to web pages by
manipulating the DOM tree.
</li>
</ul>

<h2>15.02. Class Manipulation</h2>
<ul>
<li>
JavaScript provides methods to manipulate CSS classes for elements
dynamically.
</li>
<li>
Methods like `classList.add()`, `classList.remove()`,
`classList.toggle()`, and `classList.contains()` are commonly used
for class manipulation.
</li>
<li>
Class manipulation helps in controlling element styles and behavior
programmatically.
</li>
</ul>

<h2>15.03. Handling Forms and Input Fields</h2>
<ul>
<li>
DOM provides methods to interact with forms and input fields, making
it easy to capture, validate, and process user inputs.
</li>
<li>
Commonly used methods include `getElementById()`, `querySelector()`,
and event listeners like `onchange`, `onsubmit`, and `onclick`.
</li>
<li>
Dynamic form handling can be achieved by modifying the `value`,
`checked`, and `selected` properties of input fields.
</li>
</ul>
</div>
</div>

<!-- include external JavaScript - body section -->
<script src="./15.02.01.script.js"></script>
</body>
</html>
13 changes: 13 additions & 0 deletions _examples_javascript_beginners/15. DOM (Advanced)/15.02.01.script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// Select the second <ul>
let secondUl = document.querySelectorAll("ul")[1]; // 0-based index, so 1 means the second <ul>

// Add a class to the first <ul>
secondUl.classList.add("second-ul-class");

// Select all <li> children of the second <ul>
let liElements = secondUl.querySelectorAll("li");

// Add a class to each <li> of the second <ul>
liElements.forEach((li, index) => {
li.classList.add(`second-ul-li-${index + 1}`);
});
Loading