Ves al contingut principal

Objecte document

L'Objecte document: La Porta al DOM

L'objecte document és la propietat més important de l'objecte window. La seva funció principal és servir com a node arrel de l'estructura DOM (Document Object Model), permetent al codi JavaScript accedir, inspeccionar i manipular el contingut, l'estructura i els estils del document HTML que es mostra.

Es pot visualitzar com l'arbre de nodes que representa el document HTML, on cada etiqueta, text o atribut és un node.

Propietats Clau de l'Objecte document

Aquestes propietats permeten obtenir informació general sobre el document.

Propietat Descripció Exemple Pràctic
title Cadena de text que conté el contingut de l'etiqueta <title>. És editable. document.title = "Nou Títol 🏷️";
location Un objecte que conté la URL completa del document. (És idèntic a window.location). console.log(document.location.href);
lastModified Una cadena de text que indica la data i hora de l'última modificació del document. console.log(document.lastModified);
cookie Permet llegir i escriure les galetes (cookies) associades al document. document.cookie = "tema=fosc; expires=Fri, 31 Dec 2024 12:00:00 UTC";
body Retorna l'element <body> del document. Molt útil per canvis d'estil o afegir elements. document.body.style.backgroundColor = 'lightgray';
documentElement Retorna el node arrel del DOM, que normalment és l'element <html>. console.log(document.documentElement.tagName); // "HTML"

Mètodes Clau per a la Manipulació del DOM 

Si bé document.write() existeix, els mètodes següents són la base de la manipulació moderna del DOM, ja que permeten la interacció amb elements específics sense sobreescriure tot el contingut.

Mètode Propòsit Exemple Pràctic
getElementById(id) El més comú. Retorna el primer element l'atribut id del qual coincideix amb el valor especificat. const btn = document.getElementById('boto_enviar');
querySelector(selector) Retorna el primer element que coincideixi amb un selector CSS (p. ex., .classe, #id, p > a). const primerEnllac = document.querySelector('.menu a');
querySelectorAll(selector) Retorna una NodeList (una llista) de tots els elements que coincideixen amb el selector CSS. const totsElsParagrafs = document.querySelectorAll('p');
createElement(nomEtiqueta) Crea un nou node d'element amb el nom d'etiqueta especificat (p. ex., 'div', 'p'). const nouDiv = document.createElement('div');
createTextNode(text) Crea un nou node de text. const textNode = document.createTextNode('Hola!');
appendChild(node) Afegeix un node com a últim fill de l'element. (Aquest mètode és en realitat de l'element, no del document). document.body.appendChild(nouDiv);

 

Exemple de Manipulació del DOM

Aquest exemple mostra com canviar el text d'un element i afegir un nou element a la pàgina.

HTML 
<!DOCTYPE html>
<html>
<body>
    <h1 id="titol-principal">Benvingut</h1>
    <ul id="llista-tasques">
        <li>Tasca 1</li>
    </ul>

    <script>
        // 1. Canviar el contingut d'un element existent
        const titol = document.getElementById('titol-principal');
        titol.textContent = "Manipulació del DOM OK ✅"; // textContent és millor que innerHTML per text simple

        // 2. Crear i afegir un nou element
        const llista = document.getElementById('llista-tasques');
        
        // Crear un nou <li>
        const novaTasca = document.createElement('li'); 
        
        // Crear el text per a aquest <li>
        novaTasca.textContent = "Nova tasca dinàmica"; 
        
        // Afegir el nou <li> a la llista <ul>
        llista.appendChild(novaTasca); 
    </script>
</body>
</html>

Mètodes d'Escriptura (write / open / close)

Els mètodes write(), writeln(), open() i close() s'utilitzaven històricament per generar contingut de manera dinàmica.

  • Advertència: L'ús de document.write() després que el document s'hagi carregat completament pot sobreescriure tot el contingut de la pàgina, ja que implícitament crida a document.open(). El seu ús modern és gairebé exclusivament dins de la fase de càrrega o dins d'una finestra creada per window.open().

 

Exemple d'ús de write() 

 

JavaScript 
function reemplacarContingut() {
  // Obre el document per a escriptura, esborrant tot l'anterior
  document.open("text/html"); 
  
  document.write("<h2>Nou contingut generat dinàmicament</h2>");
  document.write("<p>La data d'avui és: " + new Date().toLocaleDateString() + "</p>");
  
  // Tanca el document i mostra el contingut (obligatori després de open)
  document.close(); 
}

// Si cridem aquesta funció, l'HTML original desapareixerà.
// Per això, la manipulació amb createElement és l'opció preferida.

Atenció. Mètode no recomanat

Amunt