Esercitazione XML DOM
XML DOM
Cos'è il DOM?
Il DOM definisce uno standard per l'accesso e la manipolazione dei documenti:
Il DOM HTML definisce un modo standard per accedere e manipolare documenti HTML. Presenta un documento HTML come una struttura ad albero.
Il DOM XML definisce un modo standard per accedere e manipolare documenti XML. Presenta un documento XML come una struttura ad albero.
Comprendere il DOM è un must per chiunque lavori con HTML o XML.
Il DOM HTML
Tutti gli elementi HTML sono accessibili tramite il DOM HTML.
Questo esempio cambia il valore di un elemento HTML con id="demo":
Esempio
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Questo esempio cambia il valore del primo elemento <h1> in un documento HTML:
Esempio
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
Nota: anche se il documento HTML contiene un solo elemento <h1>, devi comunque specificare l'indice dell'array [0], poiché il metodo getElementsByTagName() restituisce sempre un array.
Puoi imparare molto di più sul DOM HTML nel nostro tutorial JavaScript .
Il DOM XML
È possibile accedere a tutti gli elementi XML tramite il DOM XML.
Il DOM XML è:
- Un modello a oggetti standard per XML
- Un'interfaccia di programmazione standard per XML
- Indipendente dalla piattaforma e dalla lingua
- Uno standard W3C
In altre parole: l'XML DOM è uno standard su come ottenere, modificare, aggiungere o eliminare elementi XML.
Ottieni il valore di un elemento XML
Questo codice recupera il valore di testo del primo elemento <title> in un documento XML:
Esempio
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Caricamento di un file XML
Il file XML utilizzato negli esempi seguenti è books.xml .
Questo esempio legge "books.xml" in xmlDoc e recupera il valore di testo del primo elemento <title> in books.xml:
Esempio
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
Esempio spiegato
- xmlDoc - l'oggetto DOM XML creato dal parser.
- getElementsByTagName("title")[0] - ottiene il primo elemento <title>
- childNodes[0] - il primo figlio dell'elemento <title> (il nodo di testo)
- nodeValue - il valore del nodo (il testo stesso)
Caricamento di una stringa XML
Questo esempio carica una stringa di testo in un oggetto DOM XML ed estrae le informazioni da esso con JavaScript:
Esempio
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Interfaccia di programmazione
Il DOM modella XML come un insieme di oggetti nodo. È possibile accedere ai nodi con JavaScript o altri linguaggi di programmazione. In questo tutorial utilizziamo JavaScript.
L'interfaccia di programmazione al DOM è definita da un insieme di proprietà e metodi standard.
Le proprietà sono spesso indicate come qualcosa che è (cioè nodename è "libro").
I metodi sono spesso indicati come qualcosa che è stato fatto (ad es. eliminare "libro").
Proprietà DOM XML
Queste sono alcune proprietà tipiche del DOM:
- x.nodeName - il nome di x
- x.nodeValue - il valore di x
- x.parentNode - il nodo padre di x
- x.childNodes - i nodi figli di x
- x.attributes - i nodi degli attributi di x
Nota: nell'elenco sopra, x è un oggetto nodo.
Metodi DOM XML
- x.getElementsByTagName( name ) - ottiene tutti gli elementi con un nome di tag specificato
- x.appendChild( node ) - inserisce un nodo figlio in x
- x.removeChild( node ) - rimuove un nodo figlio da x
Nota: nell'elenco sopra, x è un oggetto nodo.