JS_DOM (Claudio Maccherani)

Esempio DOM (Document Object Model) JavaScript - prof.Claudio Maccherani (2018)
Questa è una introduzione di esempio per vedere come funziona il DOM di JavaScript
Questa è l'esposizione "approssimativa" del DOM, per ESEMPI
Questa è la conclusione - "cenere sei e cenere tornerai..."
  <!--html>
  <head>
  <title>JS_DOM (Claudio Maccherani)</title>

  <script language="javascript">

  function Stile(paragrafo,colore) { document.getElementById(paragrafo).style.color=colore; }

  function Attributo(paragrafo,allineamento) { document.getElementById(paragrafo).align=allineamento; }

  function Sostituzione(paragrafo) { var testo = document.getElementById(paragrafo);
	  testo.innerHTML = "NUOVO TESTO in SOSTITUZIONE: Or che bravo sono stato,
	                     posso fare anche il bucato...<br>"; }

  function InserimPrima(paragrafo) { // inserisce il testo prima del paragrafo
	var txt = "NUOVO TESTO INSERITO PRIMA di '" + paragrafo +"': Nel mezzo del cammin di nostra vita mi
               ritrovai per una selva oscura che la diritta via era smarrita..."; 
	var para = document.createElement('p');  // crea un nuovo elemento (di tipo 'p'-paragrafo)
	var node = document.createTextNode(txt); // crea un nuovo nodo di tipo testo con il testo da inserire
	para.appendChild(node);                  // appende il nodo di testo al nuovo elemento		
	var element = document.getElementById('div1');  // seleziona la divisione che contiene il paragrafo
                                                           prima del quale aggiungere
	var child = document.getElementById(paragrafo);	// seleziona il nodo prima del quale aggiungere
	                                                   il nuovo elemento
	element.insertBefore(para,child); }             // aggiunge il nuovo elemento

  function InserimDopo(paragrafo) { // inserisce il testo dopo il paragrafo
	var txt = "NUOVO TESTO INSERITO DOPO '" + paragrafo + "': ricorda che il testo � solo testo, 
	                                                          NON deve contenere tag HTML !"; 
	var nuovo = document.createElement('p');  // crea un nuovo elemento (di tipo 'p'-paragrafo)
	var testo = document.createTextNode(txt); // crea un nuovo nodo con il testo da inserire
	nuovo.appendChild(testo);				  // appende il nodo testo al nuovo elemento
	nuovo.setAttribute("ID","nuovodopo");     // assegna l'ID al nuovo paragrafo
	var articolo = document.getElementById(paragrafo); // seleziona il nodo dopo il quale appendere
                                                              il nuovo elemento
	articolo.appendChild(nuovo);                                   // aggiunge il nuovo elemento
	document.getElementById("nuovodopo").style.color="AABBCC";     // gli cambia colore
	document.getElementById("nuovodopo").style.fontFamily="Arial"; // gli cambia il font
	document.getElementById("nuovodopo").style.fontSize="12"; }    // gli cambia la grandezza

  function Cancellazione(paragrafo) { // trucco per NON passare per il 'padre'
	var elimina = document.getElementById(paragrafo);
	elimina.parentNode.removeChild(elimina); }

  function Tabella(paragrafo) { // creazione tabella (da paragrafo esistente)
	var testo = document.getElementById(paragrafo);
	testo.innerHTML = '<p>TABELLA al posto del paragrafo "'+paragrafo+'":<br><table border="1">
                           <tr><td>Comune</td><td>Frazione</td></tr><tr><td>CANNARA</td>
                           <td>COLLEMANCIO</td></tr></table>'; }
  </script>
  </head>

  <body>
  <div id="div1">
  <font face="Calibri">Prova <font color="#FF0000"><b>DOM</b> (<i>Document Object Model</i>)</font>
        di JavaScript - prof.<i>Claudio Maccherani</i><br><br></font>
  <table><tr><form>
  <td><font face="Calibri"><input type="button" value="Cambia Stile"     
                                  onclick="Stile('introduzione','FFCC00');"    
                                  title="cambia colore (stile CSS) alla 'introduzione'"></font></td>
  <td><font face="Calibri"><input type="button" value="Cambia Attributo" 
                                  onclick="Attributo('conclusione','center');" 
                                  title="cambia allineamento (attributo) alla 'conclusione'"></font></td>
  <td><font face="Calibri"><input type="button" value="Sostituzione"     
                                  onclick="Sostituzione('esposizione');"       
                                  title="sostituisce il testo della 'esposizione'"></font></td>
  <td><font face="Calibri"><input type="button" value="Inserim.Dopo"     
                                  onclick="InserimDopo('esposizione');"        
                                  title="inserisce un testo prima della 'conclusione'"></font></td>
  <td><font face="Calibri"><input type="button" value="Inserim.Prima"    
                                  onclick="InserimPrima('conclusione');"       
                                  title="inserisce un testo prima della 'conclusione'"></font></td>
  <td><font face="Calibri"><input type="button" value="Cancellazione"    
                                  onclick="Cancellazione('introduzione');"     
                                  title="cancella la 'introduzione'"></font></td>
  <td><font face="Calibri"><input type="button" value="Tabella"          
                                  onclick="Tabella('tabella1');"               
                                  title="creazione tabella al posto del paragrafo 'tabella1'"></font></td>
  </tr></form></table>
  <p id="introduzione"><font face="Calibri">
  Questa è una <i><b>introduzione</b></i> di prova per vedere come funziona il DOM di JavaScript
  <br></font></p>
  <p id="esposizione"><font face="Calibri">Questa è l'<b><i>esposizione</i></b>
  "approssimativa" del DOM, per ESEMPI</br></font></p>
  <p id="conclusione"><font face="Calibri">Questa è la <b> <i>conclusione</i>
  </b> - "cenere sei e cenere tornerai..."</font></p>
  </div>
  <p id="tabella1"></p>
  </body>
  </html-->