Vedere le cose a grandi linee per uno sviluppatore aiuta, ma senza sporcarsi le mani e toccare con mano la corteccia dei singoli componenti che formano la foresta dall’ alto, non si riuscirebbe a cogliere l’essenza della cosa studiata. Internet unisce con gli ipertesti una serie di risorse strutturate ad albero. All’ interno delle pagine HTML statiche esistono una gerarchia di oggetti che possono aprire la porta a linguaggi di programmazione come javascript e jquery che possiedono le chiavi per renderli dinamiche. La relazione padre e figli che esiste all’ interno di queste pagine strutturate con nodi e foglie a formare una foresta simbolica, ci consente di muoverci velocemente in ogni punto della struttura delle pagine per manipolare gli elementi, rintracciarli, settarli con valori diversi e altro. Il document obyect model risponde alla definizione accademica di modello a oggetti del documento, forma di rappresentazione dei documenti strutturati come modello orientato agli oggetti. È lo standard ufficiale del W3C per la rappresentazione di documenti strutturati in maniera da essere neutrali sia per la lingua che per la piattaforma. È inoltre la base per una vasta gamma di interfacce di programmazione delle applicazioni, alcune di esse standardizzate dal W3C. Solo per approfondire le sigle e gli acronimi cerchiamo in rete le definizioni canoniche: il World Wide Web Consortium, anche conosciuto come W3C, è un’organizzazione non governativa internazionale che ha come scopo quello di sviluppare tutte le potenzialità del World Wide Web. Al fine di riuscire nel proprio intento, la principale attività svolta dal W3C consiste nello stabilire standard tecnici per il World Wide Web inerenti sia i linguaggi di markup che i protocolli di comunicazione. La prassi operativa agisce quindi sulla sintesi:

– DOM è il modello a oggetti del documento o di una pagina html
– Elementi di una pagina Web sono strutturati ad albero
– Il documento è la radice o il genitore
– Tutti gli altri nodi sono figli
– I nodi sono elementi HTML
– I nodi figlio possono avere nodi figlio aggiuntivi
– Javascript è un modo per accedere al DOM
– Apri un tag <script> nella pagina html
– Accedi e manipola facilmente la pagina web cambiando stili, aprendo finestre, scatenando azioni, aggiungendo elementi, catturando valori per modificarli o rimuovere qualcosa.

 

 

Vediamo un esempio base:

<html>
<body>

<p id=”demo”></p>

<script>
document.getElementById(“demo”).innerHTML = “Hello World!”;
</script>

</body>
</html>

sulla pagina viene inserito un blocco divisore che ha un identificativo di riconoscimento id valorizzato a “demo”. Questo è il nome del div e quindi lo script javascript andrà ad afferrare prima il nome dell’ elemento per costringerlo con il metodo innerHTML a sparare un testo in rendering che è il classico ciao mondo. Niente di trascendentale quindi. Da notare come il metodogetElementById sia come una enorme tenaglia che prende l’oggetto che deve fare qualcosa.Analizziamo il seguente caso, qui abbiamo due carte di identità che identificano l’oggetto, id valorizzata a intro e id valorizzata a demo, quello che si vuole ottenere è catturare il valore del blocco divisore intro e trasporlo dinamicamente in demo:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Id</h2>

<p id=”intro”>Hello World!</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id=”demo”></p>

<script>
var myElement = document.getElementById(“intro”);
document.getElementById(“demo”).innerHTML =
“The text from the intro paragraph is ” + myElement.innerHTML;
</script>

</body>
</html>

Creo una variabile myElement che cattura il contenuto di intro, poi vedo su demo come area geografica usando la tenaglia vista in precedenza getElementById e uso il metodo inner.HTML per assegnare un valore che va a usare la variabile dichiarata myElement che al suo interno contiene il contenuto di intro, anche qui nulla di nuovo sotto il sole; getElementById() può avere all’ interno delle tonde vari elementi da catturare o stili: prende carte di identità (ID), afferra classi, mette le mani sui tag classici html. Non si deve pensare al DOM come a una astrazione filosofica fatta di sottigliezze semantiche, ma come a una officina dove esistono bracci meccanici che fanno delle cose. Analizziamo il seguente script dove abbiamo il solito elemento che ha coordinate anagrafiche con id=”demo”, se volessi cambiare la scritta come si fa? Nel solito modo, usando le tenaglie del rottamatore di auto in periferia:

<p id=”demo”>testo</p>

<script>
document.getElementById(“demo”).innerHTML= “Hello”;
</script>

lo script assegnerà il nuovo valore di testo al contenuto del paragrafo. Per scrivere in output direttamente HTML usa il metodo document.write, esempio:

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

posso anche fare largo uso di variabili per fare le mie modifiche, in questo esempio non c’è nulla rispetto a quanto visto precedentemente se non il fatto che ho usato un contenitore element non indispensabile ma che migliora la sintassi del codice, poi quello che fa lo script è palese, modifica il testo di una intestazione:

<!DOCTYPE html>
<html>
<body>

<h1 id=”id01″>Old Heading</h1>

<script>
var element = document.getElementById(“id01”);
element.innerHTML = “New Heading”;
</script>

</body>
</html>

posso anche cambiare il valore di un attributo, nessuno mi impedisce di avere una foto che viene modificata in fase di caricamento semplicemente richiamando una risorsa diversa nel valore della sorgente SRC:

<!DOCTYPE html>
<html>
<body>

<img id=”myImage” src=”smiley.gif”>

<script>
document.getElementById(“myImage”).src = “landscape.jpg”;
</script>

</body>
</html>

posso anche cambiare lo stile html degli elementi modificando il vestito di un paragrafo per esempio:

<html>
<body>

<p id=”p2″>Hello World!</p>

<script>
document.getElementById(“p2”).style.color = “blue”;
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Posso anche fare la stessa cosa, modificare uno stile, usando uno strumenti di input come un bottone:

<!DOCTYPE html>
<html>
<body>

<h1 id=”id1″>My Heading 1</h1>

<button type=”button”
onclick=”document.getElementById(‘id1’).style.color = ‘red'”>
Click Me!</button>

</body>
</html>

Ok ma posso fare solo questo sfruttando la gerarchia ad albero del DOM? Certo che no! Posso ad esempio mettere in moto degli eventi:

<!DOCTYPE html>
<html>
<body>

<h1 onclick=”this.innerHTML=’Ooops!'”>Click on this text!</h1>

</body>
</html>

quando schiaccio il pulsante il testo cambierà come per magia. Posso anche usare delle funzioni specifiche, in questo caso l’event handler è scatenato richiamando una funzione specifica dal nome:

<!DOCTYPE html>
<html>
<body>

<h1 onclick=”changeText(this)”>Click on this text!</h1>

<script>
function changeText(id) {
id.innerHTML = “Ooops!”;
}
</script>

</body>
</html>

posso anche visualizzare una data al premere di un bottone:

<script>
document.getElementById(“myBtn”).onclick = displayDate;
</script>

sfruttando le proprietà del dom posso gestire il mouse quando entra ed esce dal campo di azione di un elemento:

<!DOCTYPE html>
<html>
<body>

<div onmouseover=”mOver(this)” onmouseout=”mOut(this)”
style=”background-color:#D94A38;width:120px;height:20px;padding:40px;”>
Mouse Over Me</div>

<script>
function mOver(obj) {
obj.innerHTML = “Thank You”
}

function mOut(obj) {
obj.innerHTML = “Mouse Over Me”
}
</script>

</body>

Posso catturare gli eventi in ascolto, per esempio dire quando senti lo scoccare di un click fai qualcosa:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id=”myBtn”>Try it</button>

<p id=”demo”></p>

<script>
document.getElementById(“myBtn”).addEventListener(“click”, displayDate);

function displayDate() {
document.getElementById(“demo”).innerHTML = Date();
}
</script>

</body>
</html>

Nello specifico il metodo addEventListener () collega un gestore eventi all’elemento specificato. Il metodo addEventListener () collega un gestore eventi a un elemento senza sovrascrivere i gestori eventi esistenti. È possibile aggiungere molti gestori di eventi a un elemento. È possibile aggiungere molti gestori di eventi dello stesso tipo a un elemento, ovvero due eventi “click”. È possibile aggiungere listener di eventi a qualsiasi oggetto DOM, non solo agli elementi HTML. cioè l’oggetto finestra. Il metodo addEventListener () semplifica il controllo del modo in cui l’evento reagisce al gorgogliamento. Quando si utilizza il metodo addEventListener (), JavaScript è separato dal markup HTML, per una migliore leggibilità e consente di aggiungere listener di eventi anche quando non si controlla il markup HTML. È possibile rimuovere facilmente un listener di eventi utilizzando il metodo removeEventListener ().

Il DOM ha dei figli CHILD che possono essere modellati. IL DOM può richiamare il primo figlio con first CHILD ma esistono anche dei nodi e posso manipolare il documento usando sintassi come childNodes. In ogni caso non si deve pensare che solo questa introduzione al DOM sia solo un modo di mostrare gli attrezzi dell’ officina, esiste sempre una idea di progetto che può essere messa in piedi usando queste tecniche, vediamo esempi che analizzeremo in uno dei prossimi tutorial di Umbriaway Consulting:

https://www.farwebdesign.com/projectdom/spostamento.html

https://www.farwebdesign.com/projectdom/flashcardspage.html

https://www.farwebdesign.com/projectdom/interactiveformpage.html

https://www.farwebdesign.com/projectdom/listfilteringpage.html


CONSLUSIONI
: il DOM è una tappa obbligata per le acquisizioni di uno sviluppatore. Conoscere gli alberi nella foresta e le caratteristiche del terreno ci aiuta a muoverci con disinvoltura dentro aree che ospitano risorse ricche di potenziale. Javascript è lo strumento di modellazione che consente modifiche strutturali alla FLORA, la chiave per modificare la struttura ad albero del DOM. E’ talmente ricco di metodi ed eventi che non bisogna fare altro che esplorarli per conoscerli. Per esempio:

La tecnica della pinza gigante della divina scuola di Hokuto può afferrare un form per esempio con var form = document.getElementById(‘form’) , può mettere le mani su più classi con var class1 = document.getElementsByClassName(‘class1’); può afferrare un bottone con var button1 = document.getElementById(‘button1’); può sintonizzarsi su un tag specifico con var divs = document.getElementsByTagName(‘DIV’); può usare un metodo per cercare una classe con var first = document.querySelector(‘.class1’); può cercare più classi con var all = document.querySelectorAll(‘.class1’); può prendere un elemento per nome specificato con var div1 = document.getElementById(‘div1’); o anche più elementi per ID con var div1 = document.getElementsById(‘div1’) dove posso richiamare il primo nodo dell’ albero come se fosse un array con alert(innerDivs[0].innerHTML) per esempio. Posso avere una proprietà con var div1Class = div1.getAttribute(‘class’); posso catturare un testo con i suoi tag: var div1HTML = div1.innerHTML oppure solo un testo con var div1HTML = div1.text; posso modificare degli attributi con var noValueDiv1Color = div1.style.backgroundColor; posso prendere il colore di sfondo var div1ComputedStyle = window.getComputedStyle(div1).backgroundColor, posso cambiare il valore di una proprietà con style div1.style.backgroundColor = ‘#0000ff’; posso settare deglle specifiche tecniche con div1.setAttribute(‘style’, ‘height: 100px;’); posso appendere nuovi figli con div1.appendChild(newDiv); o rimuoverli document.body.removeChild(div1) , posso intercettare delle azioni come Load o il click o anche più eventi con funzioni come:

document.addEventListener(‘DOMContentLoaded’, function(event){
alert(‘Page has been loaded’);
});

document.getElementById(‘div1’).addEventListener(‘mouseover’, function(event) {
event.target.style.backgroundColor = ‘0000ff’;
})

var button1 = document.getElementById(‘button1’);
button1.addEventListener(‘click’, function(event){
target = event.target
alert(target.innerHTML);
});