DOM-Manipulation :

This project is designed to help you learn and practice DOM (Document Object Model) manipulation in JavaScript. The HTML file provides various scenarios, and the JavaScript file contains code examples for common DOM tasks.

Project Structure :

.
|-- Don't touche
|   |-- adv.css
|   `-- adv.js
|-- Examples
|   |-- example1
|   |   |-- Element.html
|   |   `-- script.js
|   |-- example2
|   |   |-- Element.html
|   |   `-- script.js
|   |-- example3
|   |   |-- Element.html
|   |   `-- script.js
|   |-- example4
|   |   |-- Element.html
|   |   `-- script.js
|   |-- example5
|   |   |-- Element.html
|   |   `-- script.js
|   |-- example6
|   |   |-- Element.html
|   |   `-- script.js
|   |-- example7
|   |   |-- Element.html
|   |   `-- script.js
|   `-- example8
|       |-- Element.html
|       `-- script.js
|-- README.md
|-- TryWithYourSelf
|   |-- learn.css
|   |-- learn.js
|   `-- try.html
`-- photo
    |-- image-1.gif
    `-- image-2.gif

Notes :

Install VS Code and extensions like Live Server to test each code. .
You can try yourself in the try.html file in the TryWithYourSelf folder .

All Example with Element :

Example 1: Change Text (Element 1) :

<h2 id="text">Initial text</h2>

var text = document.getElementById("text");
text.textContent = "Hello World";

For more details, check Change Text Example.

Example 2: Change Text with Button (Element 2) :

<h2 id="change1">This is the text</h2>
<button onclick="change()">Change Text</button>

let text = document.getElementById("change1");

function change() {
    text.innerHTML = "text was changed";
};

For more details, check Button Example.

Example 3: Toggle Text (Element 3) :

<h2 id="change2">This is the text</h2>
<button id="btn">Toggle Text</button>

let text2 = document.getElementById("change2");
let btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    var CurrentText = "Change this text with Button";
    text2.innerHTML = (text2.innerHTML === CurrentText) ? "text was changed" : CurrentText;
});

For more details, check Toggle Text Example.

Example 4: Change Image (Element 4) :

<img id="img" src="../../photo/image-1.gif" alt="Image">
<button id="btn2">Change Image</button>

const img = document.getElementById("img");
let btn2 = document.getElementById("btn2");

btn2.onclick = function () {
    img.src = "../../photo/image-2.gif";
};

For more details, check Change Image Example.

Example 5: Work with Attributes (Element 5) :

<button class="btn1" data-info="This is some extra information!">Click Me</button>
<h2 id="info"></h2>

const button = document.querySelector('.btn1');
let text3 = document.getElementById("info");

button.addEventListener('click', function () {
    const info = button.getAttribute('data-info');
    text3.innerHTML = info;
});

For more details, check Attributes Example.

Example 6: Change Style (Element 6) :

<h2 id="toBlue">This text will be styled</h2>
<button onclick="changeColor()">Change Color</button>

const blue = document.getElementById("toBlue");

function changeColor() {
    blue.style.color = "red";
};

For more details, check Change Style Example.

Example 7: Toggle Class (Element 7) :

<h2 id="toggleClass">Text with Class</h2>
<button onclick="toggleClass()">Toggle Class</button>

function toggleClass() {
    document.getElementById("toggleClass").classList.toggle("new-class");
};

For more details, check Toggle Class Example.

Example 8: Add and Remove Elements (Element 8) :

<button onclick="addElement()">Add Element</button>
<div id="container"></div>

function addElement() {
    let div = document.createElement("div");
    div.textContent = "New element added";
    document.getElementById("container").appendChild(div);
};

For more details, check Add and Remove Elements Example.

Key Concepts :

DOM Access :

Use methods like getElementById, querySelector, and getElementsByClassName to access elements .

DOM Manipulation :

Change text using innerHTML or textContent. Modify attributes using setAttribute and getAttribute. Add or remove CSS classes with classList.

Event Handling :

Use addEventListener to bind events like click, mouseover, etc. Inline event handlers (e.g., onclick) can also be used but are less flexible.

Dynamic Styling :

Update styles directly using element.style.property.

Element Creation :

Use createElement, appendChild, and removeChild to dynamically add or remove elements.

Resources :

MDN Web Docs - DOM

W3school