Tutorial DOM Manipulation - Vanilla JavaScript

1. Selectarea Elementelor DOM

getElementById()

const element = document.getElementById('myId');

Acest paragraf are ID-ul "demo1"

getElementsByClassName()

const elements = document.getElementsByClassName('myClass');

Element 1 cu clasa "demo-class"

Element 2 cu clasa "demo-class"

Element 3 cu clasa "demo-class"

querySelector() și querySelectorAll()

// Selectează primul element care se potrivește
const firstElement = document.querySelector('.myClass');

// Selectează toate elementele care se potrivesc
const allElements = document.querySelectorAll('.myClass');
            

Primul div

Al doilea div

Al treilea div

2. Modificarea Conținutului și HTML-ului

textContent vs innerHTML

element.textContent = 'Text simplu';
element.innerHTML = '<strong>Text cu HTML</strong>';
            

Conținut original

Modificare Atribute

element.setAttribute('data-custom', 'valoare');
element.getAttribute('data-custom');
element.removeAttribute('data-custom');
            

3. Crearea și Ștergerea Elementelor

createElement() și appendChild()

const newElement = document.createElement('div');
newElement.textContent = 'Element nou';
newElement.className = 'my-class';
parentElement.appendChild(newElement);
            

Container pentru elemente noi

insertBefore() și replaceChild()

// Inserare înainte de un element
parent.insertBefore(newElement, referenceElement);

// Înlocuire element
parent.replaceChild(newElement, oldElement);
            

Element 1
Element de Referință
Element 3

4. Gestionarea Evenimentelor

addEventListener()

element.addEventListener('click', function(event) {
    console.log('Element apăsat!', event.target);
});

// Sau cu arrow function
element.addEventListener('mouseover', (e) => {
    e.target.style.background = 'yellow';
});
            

Interacționează cu mine! (click, hover, double-click)

Log evenimente:

Event Delegation

// În loc să adăugăm evenimente pe fiecare element
// Le adăugăm pe părinte și verificăm target-ul
parent.addEventListener('click', function(e) {
    if (e.target.classList.contains('item')) {
        // Procesare click pe item
    }
});
            

Click pe butoane pentru a vedea delegarea

5. Manipularea Stilurilor CSS

Modificare Stiluri Inline

element.style.backgroundColor = 'blue';
element.style.fontSize = '20px';
element.style.transform = 'rotate(45deg)';
            

Clase CSS

element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');
element.classList.contains('my-class'); // true/false
            

Element pentru manipulare clase

6. Traversarea DOM-ului

Navigare în Arbore

// Părinți
element.parentNode
element.parentElement

// Copii
element.childNodes       // include text nodes
element.children         // doar elemente HTML
element.firstElementChild
element.lastElementChild

// Frați
element.nextElementSibling
element.previousElementSibling
            

Părinte

Element Target

Copil 1

Copil 2

Copil 3

Frate

7. Atribute Data și Custom

Dataset API

// HTML: <div data-user-id="123" data-user-name="John">
element.dataset.userId     // "123"
element.dataset.userName   // "John"
element.dataset.newAttr = "value"; // Adaugă data-new-attr
            

Element cu atribute data

8. Tehnici Avansate

DocumentFragment pentru Performanță

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
}
list.appendChild(fragment); // O singură operație DOM
            

IntersectionObserver pentru Lazy Loading

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Element vizibil
            entry.target.classList.add('visible');
        }
    });
});

observer.observe(element);
            

Scroll pentru a vedea efectul...

Element observat - va apărea când devine vizibil

Template Literals pentru HTML Dinamic

const users = [
    { name: 'Ana', age: 25 },
    { name: 'Ion', age: 30 }
];

const html = users.map(user => `
    <div class="user-card">
        <h4>${user.name}</h4>
        <p>Vârstă: ${user.age}</p>
    </div>
`).join('');

container.innerHTML = html;
            

🚀 Tutorial DOM Manipulation