Tutorial XML DOM

Cos'è il DOM?

Il DOM definisce i criteri standard per accedere e operare sui documenti:

“Il Document Object Model (DOM) W3C è un'interfaccia indipendente da piattaforma e linguaggio che permette a programmi e script di accedere e aggiornare dinamicamente il contenuto, la struttura e lo stile dei documenti.”

Il HTML DOM definisce i metodi standard per accedere e operare sui documenti HTML. Presenta i documenti HTML come una struttura ad albero.

Il XML DOM definisce i metodi standard per accedere e operare sui documenti XML. Presenta i documenti XML come una struttura ad albero.

Per chiunque utilizzi HTML o XML, è necessario comprendere il DOM.

HTML DOM

Tutti gli elementi HTML possono essere acceduti tramite l'HTML DOM.

Esempio 1

Questo esempio cambia il valore dell'elemento HTML con id="demo":

<h1 id="demo">Questo è il titolo</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Prova da solo

Esempio 2

Questo esempio cambia il valore dell'elemento <h1> del primo documento HTML:

<h1>Questo è il titolo</h1>
<h1>Questo è il titolo</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Prova da solo

Attenzione:Anche se il documento HTML contiene solo un elemento <h1>, devi specificare l'indice dell'array [0] perché il metodo getElementsByTagName() restituisce sempre un array.

Puoi imparare di più sull'HTML DOM nel nostro tutorial JavaScript.

DOM XML

Tutti gli elementi XML possono essere acceduti tramite XML DOM.

XML DOM è:

  • Modello oggettuale standard per XML
  • Interfaccia di programmazione standard per XML
  • Indipendente dalla piattaforma e dal linguaggio
  • Standard W3C

In altre parole: XML DOM è lo standard per come ottenere, modificare, aggiungere o eliminare gli elementi XML.

Ottieni il valore dell'elemento XML

Questo esempio cerca il valore del testo dell'elemento <title> del primo <title> nel documento XML:

Esempio

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

Caricamento del file XML

Il file XML utilizzato nell'esempio è books.xml.

Questo esempio legge "books.xml" in xmlDoc e cerca il valore del testo dell'elemento <title> del primo <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>

Prova da solo

Spiegazione degli esempi

  1. xmlDoc - Oggetto DOM XML creato dal parser
  2. getElementsByTagName("title")[0] - Ottenere il primo elemento <title>
  3. childNodes[0] - Il primo nodo figlio dell'elemento <title> (nodo testo)
  4. nodeValue - Il valore del nodo (testo stesso)

Caricare una stringa XML

Questo esempio carica una stringa di testo in un oggetto DOM XML e utilizza JavaScript per estrarre informazioni da essa:

Esempio

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</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>

Prova da solo

Interfaccia di programmazione

DOM modella XML come un insieme di oggetti nodo. È possibile accedere ai nodi utilizzando JavaScript o altri linguaggi di programmazione. In questo tutorial, utilizziamo JavaScript.

L'interfaccia di programmazione DOM è definita da un insieme di proprietà e metodi standard.

ProprietàDi solito si riferisce a cosa è la cosa (ad esempio, nodename è "book").

MetodiDi solito si riferisce a cosa si può fare (ad esempio, eliminare l'azione "book").

Proprietà XML DOM

Questi sono alcune proprietà DOM tipiche:

  • x.nodeName - il nome di x
  • x.nodeValue - il valore di x
  • x.parentNode - il nodo genitore di x
  • x.childNodes - i nodi figli di x
  • x.attributes - il nodo attributi di x

注释：Nell'elenco superiore, x è un oggetto nodo.

XML DOM 方法

  • x.getElementsByTagName(name) - 获取拥有指定标签名称的所有元素
  • x.appendChild(node) - 向 x 插入一个子节点
  • x.removeChild(node) - 从 x 中删除子节点

注释：在上面的列表中，x 是一个节点对象。