DOM

Introducció

Quan un usuari visita una pàgina web, el servidor torna un fitxer HTML al navegador que pot tenir aquest aspecte:

El que fa el navegador és llegir l'HTML i construrr el Document Object Model (DOM).

El DOM és una representació d'objectes dels elements HTML. Actua com un pont entre el codi i la interfície d'usuari i té una estructura en forma d'arbre amb relacions pares i fills.

Pots utilitzar mètodes DOM i JavaScript per escoltar els esdeveniments de l'usuari i manipular el DOM seleccionant, afegint, actualitzant i suprimint elements específics a la interfície d'usuari. La manipulació DOM et permet no només orientar-vos a elements específics, sinó també canviar-ne l'estil i el contingut.

Recursos addicionals:

Actualitzar la interfície d'usuari

Crea aquest fitxer index.html:

<html>
  <body>
    <div></div>
  </body>
</html>

A continuació afegeix un indentificador únic a l'element <div>:

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

Per escriure JavaScript dins del fitxer HTML, afegiu un element <script>:

<html>
  <body>
    <div id="app"></div>
  </body>
  <script type="text/javascript"></script>
</html>

Ara, dins de l'element <script> utilitza el mètode getElementById per seleccionar l'element <div> mitjançant el seu id:

<html>
  <body>
    <div id="app"></div>
  </body>
  <script type="text/javascript">
    const app = document.getElementById('app');
  </script>
</html>

Pots continuar utilitzant els mètodes DOM per crear un nou element <h1>:

<html>
  <body>
    <div id="app"></div>
  </body>
  <script type="text/javascript">
     
    // Creem un element de tipus text
    const headerContent = document.createTextNode('Develop. Preview. Ship.');

    // Creem un element H1 i afegim l'element de tipus text a l'element H1
    const header = document.createElement('h1');
    header.appendChild(headerContent);
 
    // Seleccionem l'elmenent que té la id 'app' i li afgegim l'element H1 que hem creat
    const app = document.getElementById('app');
    app.appendChild(header);

  </script>
</html>

Obre el fitxer amb l'extensió Live Preview:

Pots veure que el navegador executa el codi Javascript i afegeix una element <h1> amb el text "Develop. Preview. Ship."

(continua)

[Actualització de la interfície d'usuari amb Javascript](Actualització de la interfície d'usuari amb Javascript)