Categorie
Javascript Programmazione

{JS} DOM (Document Object Model) API

Cos’è la DOM API?

Esiste un’ altro oggetto contenuto nell’oggetto window ed è “document”. “document” rappresenta il documento HTML caricato nella finestra corrente e la sua struttura, nota con il nome di DOM, Document Object Model.
Questo oggetto è utilite per la manipolazione stessa del DOM.

DOM tree

Il DOM fornisce una rappresentazione del documento sotto forma di composizione gerarchica di oggetti chiamata “DOM tree”.
La DOM tree “albero del DOM” è pensato per essere facilmente accessibile tramite JavaScript, in lettura, ma anche in scrittura consentendo di poter cambiare dinamicamente la sua struttura, il contenuto e lo stile.

La rappresentazione di un documento è organizzata in forma gerarchica con una struttura ad albero.
La radice di tale albero è l’oggetto document.
Il DOM si presenta come un albero con nodi che hanno diversi tip.

Tipi di nodi

Tipo di nodoDescrizione
documentoesiste un solo nodo di questo tipo nella rappresentazione di una pagina HTML e costituisce la radice dell’albero; tuttavia in presenza di pagine con frame ci sono più nodi di tipo documento.
elementoun nodo di tipo elemento individua in genere ad un tag HTML, come ad esempio <body><div><p>
attributoun nodo di tipo attributo corrisponde ad un attributo di un tag HTML, come ad esempio l’attributo src del tag <img>
testoun nodo di tipo testo corrisponde al contenuto testuale di un nodo, compresi eventuali spazi e caratteri speciali

La distinzione delle tipologie di nodi è importante in quanto ci sarà necessaria al fine di selezionare degli elementi ed effettuare delle operazioni su di essi.

Selezionare gli elementi del DOM

Note: d'ora in avanti per utilizzare oggetti metodi proprietà di un oggetto figlio di window ometteremo quest'ultimo.

Per selezionare elementi presenti nel DOM, l’oggetto document ci fornisce numerosi metodi:

MetodoDescrizioneritorna
document.getElementById(‘id’)restituisce elemento con id indicato | null se inesistente | solo il primo se esistono più elementi con lo stesso idelemento
document.getElementByTagName(‘div’)restituisce una nodeList degli elementi con tag indicato | indicando “*” restituisce tutti gli elementi del documentonode-list
document.querySelector(‘p.class’)restituisce solo il primo elemento individuto dal selettore css anche compositielemento
document.querySelectorAll(‘div.class’)restituirce nodeList degli elementi individuati dal selettore css anche compositinode-list
document.getElementByName(‘Parola’)restituisce l’elemento che ha come attributo “name” il valore indicatoelemento
document.getElementByClassName(‘class’)restituisce nodeList degli elementi con la classe indicatanode-list

Cos’è una Node List?

Una “Node List” è un array di tutti gli elementi corrispondenti alla selezione indicata.
Trattandosi di array potremo utilizzare metodo destinati agli stessi oggetti array, come forEach(), filter() ecc. per la loro manipolazione.
A decidere cosa ci è restituito, se un elemento singolo o una node-list, siamo noi sviluppatori in base alla tipo-di-metodo-selettore-del-dom utilizzato.
Come dalla tabella qui in alto solo alcuni metodi sono in grado di restituirci delle node-list, gli altri anche indicando un valore che coincide con altri e più elementi presenti restituiranno solo la prima-corrispondenza.

Leggere e modificare gli elementi del DOM

Una volta individuato l’elemento o gli elementi presenti su una pagina, possiamo leggere e modificarne il contenuto o altre caratteristiche sfruttando proprietà e metodi specifiche dei nodi di tipo elemento.

Attributi

MetodoDescrizione
element.hasAttribute(nomeAttributo)restituisce true se l’elemento ha l’attributo specificato come parametro
element.hasAttributes()restituisce true se l’elemento ha almeno un attributo (valorizzato)
element.getAttribute(nomeAttributo)restituisce il valore dell’attributo specificato come parametro
element.setAttribute(nomeAttributo, valore)imposta un valore per un attributo
element.removeAttribute(“classe”);rimuove nell’elemento l’attributo indicato
element.className;
element.className = “miaClasse”;
ottiene il valore dell’attributo classe dell’elemento selezionato | a differenza di getAttribute restituisce ” ” e non null;
imposta il valore dell’attributo classe dell’elemento selezionato
element.classList;
element.classList.add(“nuovaClasse”);
element.classList.remove(“classe”);
mostra lista delle classi associate ad un elemento; con i metodi .add e .remove è possibile aggiungere e rimuovere classi

Tra i metodi più utilizzati troviamo .setAttribute(), .removeAttribute(), .classList.add() e .classList.remove().

E’ anche possibile accedere agli attribuiti di un elemento in maniera diretta;
Questo approccio consente la lettura e la scritta degli attributi.

element.attributo;
element.attributo=”valore”;
accesso diretto agli attributi degli elementi in modalità lettura/scrittura
element.id;
elemento.id="ilMioId";
elemento.src;
element.src="http:\\www.sito.it\image.jpg";
element.href;
element.href="http:\\www.sito.it\pagina.html"

Contenuti

ProprietàDescrizione
element.innerHTML;
element.innerHTML = “<p> testo </p>”;
legge e scrive contenuto html dell’elemento selezionato
element.innerText;
element.innerText = “contenuto testuale”;
legge e scrive contenuto solo testuale (non-html) dell’elemento selezionato
element.textContent;
element.textContent =”contenuto testuale”;
principale differenza da innerText, textContent legge anche i contenuti di elementi come <style> o <script>
mentre innertText recupera solo quello che è umanamente leggibile
element.nodeValue;
element.nodeValue =” contenuto testuale”;
legge e scrive il contenuto di un nodo di testo
element.value;per gli elementi di tipo input legge il valore inserito

Le proprietà più utilizzatiìe sono .innetHTML, .textContent e .value;
quest’ultima merita una menzione di nota in quanto consente di recuperare i valori immessi in un campo input.

Stile

ProprietàDescrizione
element.style;
element.style.backgroundColor = “Red”;
lettura e scrittura dell’attribuito style per accedere alle proprietà css è necessario rimuovere “-” separatore ed utilizzare il camelCase

Con la proprietà .style è possibile modificare lo stile-css degli elementi;
I nomi delle proprietà-css sono indicati rimuovendo gli elementi separatori ed utilizzando il camelCase.

es.
background-color = backgroundColor
border-radius = borderRadius
ecc..

Navigare i nodi del DOM

Esistono anche metodi del DOM che ci consentono di analizzare e muoverci all’interno della struttura di un documento.

index.html
<html>
    <head></head>
    <body>
    <div>
        <ul class="elenco">
            <li><p>Paragrafo 1</p></li>
            <li><p>Paragrafo 2</p></li>
            <li><p>Paragrafo 3</p></li>
            <li><p>Paragrafo 4</p></li>
            <li><p>Paragrafo 5</p></li>
        </ul>
    </div>    
    </body>
    <footer></footer>
</html>
element.childNodes;
element.childNodes[0];
restitusce una nodeList degli elementi figli di una selezione inclusi nodi di testo; sono recuperabili indicando l’indicenode-list
element.children;
element.children[0];
element.chidren.item();
restitusce una nodeList degli soli elementi figli di una selezione rendendoli selezionabili tramite indicenode-list
element.firstChild();restituisce il primo elemento figlioelemento
element.lastChild();restituisce l’ultimo elemento figlioelemento
element.parentNode();restituisce il nodo genitore di un elementoelemento
element.nextSibling();restituisce il primo nodo fratelloelemento
element.previousSibling();restituisce il precedente nodo fratelloelemento

Ad eccezione degli ultimi metodo che restituisco un elemento singolo i metodi .childNodes e .children restituiscono node-list navigabile tramite  notazione in stile matrice “[i]”

Aggiungere e rimuovere elementi dal DOM

Oltre a modificare il contenuto HTML e gli attributi di un elemento, il DOM ci consente di modificare la struttura di un documento. Possiamo creare, rimuovere, riposizionare e aggiungere elementi appendendoli ad altri già presenti.

MetodoDescrizione
document.createElement(“p”);crea un nuovo elemento; inizialmente posizionato come ultimo elemento del dom.
document.createTextNode(text);crea un nuovo elemento di testo; inizialmente posizionato come ultimo elemento del dom.
element.appendChild(altroElemento);aggiunge/appende elemento ad un altro già presente
elementParent.insertBefore(elemento, altroElemento);applicabile agli elementi-padre; inserisce un elemento primo di un altro elemento
elementParent.replaceChild(elemento, altroElemento);applicabile agli elementi-padre; rimpiazza un elemento in sostituzione di uno già esistente
elementParent.removeChild(elemento);applicabile agli elementi-padre; rimuove un elemento figlio
element.remove();rimuove l’elemento
element.cloneNode()crea una compia del nodo-elemento

E’ importante evidenziare che se il nostro obbiettivo è quello di aggiungere un elemento la procedura corretta da seguire è:

creare un nuovo nodo mediante .createElement(); il nodo si posizionerà come ultimo elemento del dom; successivamente, appende o riposizionare con i vari metodi a disposizione il nodo creato.

Alcuni metodi si applicano solo a nodi-padre “Parent Node”, nella tabella sono indicati con “elementParent.metodo()”

element.innerHTML=” “;aggiorna il contenuto con una stringa vuota

E’ possibile utilizzare la proprietà .innerHTML per sovrascrivere il contenuto di un elemento con una stringa vuota; otterremo così il risultato di far “rimuovere” l’elemento dal DOM; in realtà non sarà rimosso, occuperà sempre il suo spazio nel flow del documento ma essendo vuoto non sarà mostrato.
Questa tecnica è molto simile alla proprietà “visibility:hidden” presente nei fogli di stile CSS; l’elemento c’è ma non si vede.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *