Manipolazione DOM in Javascript

js-dom-function.MD

JS DOM

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.