JavaScript Utilizzo dell'API DOM


Esempio

DOM sta per D ocument O bject M odel. È una rappresentazione orientata agli oggetti di documenti strutturati come XML e HTML .

L'impostazione della proprietà textContent di un Element è un modo per stampare il testo su una pagina Web.

Ad esempio, considera il seguente tag HTML:

<p id="paragraph"></p>

Per modificare la proprietà textContent , possiamo eseguire il seguente codice JavaScript:

document.getElementById("paragraph").textContent = "Hello, World";

Questo selezionerà l'elemento con il paragraph id e ne imposterà il contenuto in "Hello, World":

<p id="paragraph">Hello, World</p>

(Vedi anche questa demo)


È inoltre possibile utilizzare JavaScript per creare un nuovo elemento HTML a livello di codice. Ad esempio, considera un documento HTML con il seguente corpo:

<body>
   <h1>Adding an element</h1>
</body> 

Nel nostro JavaScript, creiamo un nuovo tag <p> con una proprietà textContent e lo aggiungiamo alla fine del corpo html:

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM

Ciò cambierà il tuo corpo HTML al seguente:

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>

Si noti che per manipolare gli elementi nel DOM utilizzando JavaScript, il codice JavaScript deve essere eseguito dopo che l'elemento pertinente è stato creato nel documento. Questo può essere ottenuto inserendo i tag <script> JavaScript dopo tutto il tuo altro contenuto <body> . In alternativa, puoi anche utilizzare un listener di eventi per ascoltare ad es. L'evento onload window , aggiungendo il codice a quel listener di eventi, ritarderà l'esecuzione del codice fino a quando non sarà stato caricato l'intero contenuto della pagina.

Un terzo modo per assicurarsi che tutto il tuo DOM sia stato caricato, è di avvolgere il codice di manipolazione DOM con una funzione di timeout di 0 ms . In questo modo, questo codice JavaScript viene re-accodato alla fine della coda di esecuzione, che offre al browser la possibilità di terminare alcune cose non JavaScript che sono state in attesa di completare prima di partecipare a questo nuovo pezzo di JavaScript.