JS DOM

Altri Cheat Sheet:

🎯 JS DOM functions (Manipolazione DOM in Javascript)
JS events (Eventi in Javascript)
Eventi di Drag and Drop

1. Selezione degli Elementi

document.getElementById(id): seleziona un elemento per il suo id.
document.getElementsByClassName(className): seleziona tutti gli elementi con una certa classe.
document.getElementsByTagName(tagName): seleziona tutti gli elementi di un certo tag.
document.querySelector(selector): seleziona il primo elemento che corrisponde a un selettore CSS.
document.querySelectorAll(selector): seleziona tutti gli elementi che corrispondono a un selettore CSS.

2. Manipolazione del Contenuto

element.innerHTML: ottiene o imposta il contenuto HTML di un elemento.
element.textContent: ottiene o imposta solo il testo all'interno di un elemento, senza considerare l'HTML.
element.innerText: simile a textContent ma tiene conto dello stile e della visualizzazione.

3. Manipolazione degli Attributi

element.setAttribute(name, value): imposta un attributo di un elemento.
element.getAttribute(name): ottiene il valore di un attributo di un elemento.
element.removeAttribute(name): rimuove un attributo da un elemento.
element.hasAttribute(name): verifica se un elemento ha un certo attributo.

4. Aggiungere o Rimuovere Elementi dal DOM

document.createElement(tagName): crea un nuovo elemento HTML.
element.appendChild(childElement): aggiunge un elemento come figlio alla fine di un altro elemento.
element.insertBefore(newElement, referenceElement): inserisce un elemento prima di un altro.
element.removeChild(childElement): rimuove un elemento figlio.
element.replaceChild(newElement, oldElement): sostituisce un elemento figlio con un altro.

5. Classi CSS

element.classList.add(className): aggiunge una classe.
element.classList.remove(className): rimuove una classe.
element.classList.toggle(className): aggiunge o rimuove una classe in base alla sua presenza.
element.classList.contains(className): verifica se un elemento ha una certa classe.

6. Stili Inline

element.style.propertyName: imposta o ottiene uno stile inline (ad esempio, element.style.backgroundColor = "red").

7. Gestione degli Eventi

element.addEventListener(event, callback): aggiunge un evento a un elemento.
element.removeEventListener(event, callback): rimuove un evento da un elemento.

8. Navigazione tra gli Elementi

element.parentNode: accede al nodo genitore.
element.childNodes: ottiene tutti i nodi figli (inclusi i nodi di testo).
element.children: ottiene solo gli elementi figli.
element.firstChild / element.lastChild: accede rispettivamente al primo o ultimo figlio.
element.nextSibling / element.previousSibling: accede al prossimo o al precedente nodo.
element.nextElementSibling / element.previousElementSibling: accede all'elemento successivo o precedente.

9. Misure e Posizione degli Elementi

element.offsetHeight, element.offsetWidth: restituiscono l'altezza e larghezza totale dell'elemento (incluso padding e bordo).
element.clientHeight, element.clientWidth: restituiscono altezza e larghezza visibili (incluso padding, esclusi bordo e margini).
element.getBoundingClientRect(): restituisce un oggetto con le dimensioni e la posizione dell'elemento rispetto alla finestra.

📖 Esempi Pratici

1. Selezione degli Elementi

// Seleziona per ID
const titolo = document.getElementById('titolo-principale');
console.log(titolo); // Stampa l'elemento o null se non trovato

// Seleziona per classe (restituisce HTMLCollection)
const bottoni = document.getElementsByClassName('btn');
console.log(bottoni.length); // Numero di elementi trovati

// Seleziona per tag (restituisce HTMLCollection)
const paragrafi = document.getElementsByTagName('p');
for (let p of paragrafi) {
    console.log(p.textContent);
}

// Seleziona il primo elemento con querySelector
const primoBottone = document.querySelector('.btn');
const input = document.querySelector('input[type="email"]');

// Seleziona tutti gli elementi con querySelectorAll (restituisce NodeList)
const tuttiIBottoni = document.querySelectorAll('.btn');
tuttiIBottoni.forEach(btn => {
    console.log(btn.textContent);
});

2. Manipolazione del Contenuto

const div = document.getElementById('contenuto');

// innerHTML - include tag HTML
div.innerHTML = '<h2>Nuovo Titolo</h2><p>Nuovo paragrafo</p>';
console.log(div.innerHTML); // Stampa: <h2>Nuovo Titolo</h2><p>Nuovo paragrafo</p>

// textContent - solo testo, ignora HTML
div.textContent = 'Solo testo semplice';
console.log(div.textContent); // Stampa: Solo testo semplice

// innerText - come textContent ma considera lo stile CSS
const nascosto = document.querySelector('.hidden');
console.log(nascosto.textContent); // Mostra il testo anche se nascosto
console.log(nascosto.innerText); // Stringa vuota se l'elemento è nascosto

3. Manipolazione degli Attributi

const immagine = document.querySelector('img');
const link = document.querySelector('a');

// Imposta attributi
immagine.setAttribute('src', 'nuova-immagine.jpg');
immagine.setAttribute('alt', 'Descrizione immagine');
link.setAttribute('href', 'https://example.com');

// Ottieni attributi
const srcCorrente = immagine.getAttribute('src');
console.log(srcCorrente); // Stampa: nuova-immagine.jpg

// Verifica se esiste un attributo
if (link.hasAttribute('target')) {
    console.log('Il link ha l\'attributo target');
}

// Rimuovi attributo
link.removeAttribute('target');

4. Aggiungere o Rimuovere Elementi dal DOM

const container = document.getElementById('container');

// Crea un nuovo elemento
const nuovoParagrafo = document.createElement('p');
nuovoParagrafo.textContent = 'Sono un nuovo paragrafo!';

// Aggiungi alla fine
container.appendChild(nuovoParagrafo);

// Crea e inserisci un titolo prima del paragrafo
const titolo = document.createElement('h3');
titolo.textContent = 'Nuovo Titolo';
container.insertBefore(titolo, nuovoParagrafo);

// Rimuovi un elemento
const elementoDaRimuovere = document.querySelector('.da-rimuovere');
if (elementoDaRimuovere) {
    elementoDaRimuovere.parentNode.removeChild(elementoDaRimuovere);
    // O più semplice con remove(): elementoDaRimuovere.remove();
}

// Sostituisci un elemento
const elementoVecchio = document.getElementById('vecchio');
const elementoNuovo = document.createElement('div');
elementoNuovo.textContent = 'Elemento sostituito!';
elementoVecchio.parentNode.replaceChild(elementoNuovo, elementoVecchio);

5. Classi CSS

const elemento = document.querySelector('.card');

// Aggiungi una classe
elemento.classList.add('attiva');

// Rimuovi una classe
elemento.classList.remove('nascosta');

// Toggle - aggiunge se non c'è, rimuove se c'è
elemento.classList.toggle('evidenziata');

// Verifica se ha una classe
if (elemento.classList.contains('attiva')) {
    console.log('L\'elemento è attivo');
}

// Aggiungi più classi insieme
elemento.classList.add('classe1', 'classe2', 'classe3');

// Lista di tutte le classi
console.log(elemento.classList); // DOMTokenList delle classi

6. Stili Inline

const box = document.getElementById('mia-box');

// Imposta stili inline
box.style.backgroundColor = 'lightblue';
box.style.width = '200px';
box.style.height = '100px';
box.style.border = '2px solid black';

// Per proprietà con trattini, usa camelCase
box.style.borderRadius = '10px';
box.style.fontSize = '16px';

// Ottieni uno stile
console.log(box.style.backgroundColor); // Stampa: lightblue

// Rimuovi uno stile
box.style.backgroundColor = '';

// Imposta più stili insieme con cssText
box.style.cssText = 'color: red; font-size: 20px; margin: 10px;';

7. Gestione degli Eventi

const bottone = document.getElementById('mio-bottone');

// Funzione gestore evento
function gestoreClick() {
    console.log('Bottone cliccato!');
}

// Aggiungi evento
bottone.addEventListener('click', gestoreClick);

// Evento con funzione anonima
bottone.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'yellow';
});

// Evento con arrow function
bottone.addEventListener('mouseout', () => {
    bottone.style.backgroundColor = '';
});

// Rimuovi evento (serve la stessa funzione usata per aggiungerlo)
bottone.removeEventListener('click', gestoreClick);

// Evento con parametri aggiuntivi
bottone.addEventListener('click', function(event) {
    event.preventDefault(); // Previene comportamento predefinito
    console.log('Posizione click:', event.clientX, event.clientY);
});

8. Navigazione tra gli Elementi

<!-- Esempio HTML -->
<div id="contenitore">
    <h2>Titolo</h2>
    <p>Primo paragrafo</p>
    <p>Secondo paragrafo</p>
    <span>Span element</span>
</div>

const contenitore = document.getElementById('contenitore');
const primoParagrafo = document.querySelector('p');

// Naviga verso l'alto
console.log(primoParagrafo.parentNode); // div#contenitore

// Naviga verso il basso
console.log(contenitore.children); // HTMLCollection [h2, p, p, span]
console.log(contenitore.childNodes); // NodeList [text, h2, text, p, text, p, text, span, text]

// Primo e ultimo figlio
console.log(contenitore.firstElementChild); // h2
console.log(contenitore.lastElementChild); // span

// Elementi fratelli
console.log(primoParagrafo.nextElementSibling); // secondo p
console.log(primoParagrafo.previousElementSibling); // h2

// Conta i figli
console.log(contenitore.children.length); // 4

9. Misure e Posizione degli Elementi

const elemento = document.getElementById('mio-elemento');

// Dimensioni totali (incluso padding e bordo)
console.log('Larghezza totale:', elemento.offsetWidth);
console.log('Altezza totale:', elemento.offsetHeight);

// Dimensioni area contenuto (incluso padding, escluso bordo)
console.log('Larghezza contenuto:', elemento.clientWidth);
console.log('Altezza contenuto:', elemento.clientHeight);

// Posizione e dimensioni precise
const rect = elemento.getBoundingClientRect();
console.log('Posizione dall\'alto:', rect.top);
console.log('Posizione da sinistra:', rect.left);
console.log('Larghezza:', rect.width);
console.log('Altezza:', rect.height);

// Scroll della finestra
console.log('Scroll verticale:', window.pageYOffset);
console.log('Scroll orizzontale:', window.pageXOffset);

// Dimensioni della finestra
console.log('Larghezza finestra:', window.innerWidth);
console.log('Altezza finestra:', window.innerHeight);

💡 Esempio Completo: Todo List

<div id="todo-container">
    <input type="text" id="todo-input" placeholder="Inserisci una task...">
    <button id="add-btn">Aggiungi</button>
    <ul id="todo-list"></ul>
</div>

// Seleziona elementi
const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');

// Funzione per aggiungere una task
function aggiungiTask() {
    const testoTask = input.value.trim();
    
    if (testoTask === '') {
        alert('Inserisci una task!');
        return;
    }
    
    // Crea elementi
    const li = document.createElement('li');
    const span = document.createElement('span');
    const deleteBtn = document.createElement('button');
    
    // Imposta contenuto
    span.textContent = testoTask;
    deleteBtn.textContent = 'Elimina';
    
    // Aggiungi classi
    li.classList.add('todo-item');
    deleteBtn.classList.add('delete-btn');
    
    // Evento per eliminare
    deleteBtn.addEventListener('click', function() {
        li.remove();
    });
    
    // Evento per completare task
    span.addEventListener('click', function() {
        span.classList.toggle('completata');
    });
    
    // Assembla elementi
    li.appendChild(span);
    li.appendChild(deleteBtn);
    todoList.appendChild(li);
    
    // Pulisci input
    input.value = '';
}

// Eventi
addBtn.addEventListener('click', aggiungiTask);
input.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        aggiungiTask();
    }
});

.todo-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.completata {
    text-decoration: line-through;
    color: #888;
}

.delete-btn {
    background: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

Questo esempio mostra come combinare tutte le tecniche DOM per creare un'applicazione funzionante!

withArtur/js-dom-function.md

JS DOM

1. Selezione degli Elementi

2. Manipolazione del Contenuto

3. Manipolazione degli Attributi

4. Aggiungere o Rimuovere Elementi dal DOM

5. Classi CSS

6. Stili Inline

7. Gestione degli Eventi

8. Navigazione tra gli Elementi

9. Misure e Posizione degli Elementi

📖 Esempi Pratici

1. Selezione degli Elementi

2. Manipolazione del Contenuto

3. Manipolazione degli Attributi

4. Aggiungere o Rimuovere Elementi dal DOM

5. Classi CSS

6. Stili Inline

7. Gestione degli Eventi

8. Navigazione tra gli Elementi

9. Misure e Posizione degli Elementi

💡 Esempio Completo: Todo List