Il DOM definisce uno standard per l'accesso e la manipolazione di documenti.
Il DOM XML presenta un documento XML come una struttura ad albero.
Il HTML DOM presenta un documento HTML come una struttura ad albero.
Capire il DOM è un must per chiunque lavori con HTML o XML.
DOM XML Albero Esempio
Qual è il DOM?
Il DOM definisce uno standard per l'accesso ai documenti come XML e HTML:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
Il DOM è suddiviso in 3 diverse parti / livelli:
- Core DOM - modello standard per ogni documento strutturato
- XML DOM - modello standard per i documenti XML
- HTML DOM - modello standard per i documenti HTML
Il DOM definisce le objects and properties di tutti gli elementi del documento, e la methods (interface) di accedervi.
Il HTML DOM
Il DOM HTML definisce un modo standard per l'accesso e la manipolazione di documenti HTML.
Tutti gli elementi HTML si può accedere attraverso il DOM HTML.
Il HTML DOM definisce le objects, properties and methods di tutti gli elementi HTML.
Modificare il valore di un elemento HTML
Questo esempio viene modificato 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> Prova tu stesso " Questo esempio viene modificato il valore del primo <h1> elemento 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> Prova tu stesso " Nota: anche se il documento HTML containes soltanto UN <h1> elemento è comunque necessario specificare l'indice array [0], perché il getElementsByTagName() restituisce sempre un array.
Si può imparare molto di più su DOM HTML nel nostro tutorial di JavaScript .
Il DOM XML
Il DOM XML definisce un modo standard per l'accesso e la manipolazione di documenti XML.
Tutti gli elementi XML si può accedere attraverso il DOM XML.
Il DOM XML definisce le objects, properties and methods di tutti gli elementi XML.
Il DOM XML è:
- Un modello oggetto standard per XML
- Una interfaccia di programmazione standard per XML
- Piattaforma e indipendente dalla lingua
- Uno standard W3C
In altre parole: The XML DOM is a standard for how to get, change, add, or delete XML elements.
Prendi il valore di un elemento XML
Questo codice recupera il valore di testo del primo <title> elemento in un documento XML:
Esempio
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Caricamento di un file XML
Il file XML utilizzato negli esempi di seguito è books.xml .
Questo esempio legge "books.xml" in xmlDoc e recupera il valore di testo del primo <title> elemento in books.xml:
Esempio
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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 tu stesso " esempio spiegato
- xmlDoc - l'oggetto DOM XML creato dal parser.
- getElementsByTagName("title")[0] - ottenere la prima <title> elemento
- childNodes[0] - il primo figlio del <title> elemento (il nodo di testo)
- nodeValue - il valore del nodo (the text itself)
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>
Prova tu stesso " Interfaccia di programmazione
I modelli DOM XML come un insieme di oggetti nodo. I nodi possono essere raggiunti con JavaScript o altri linguaggi di programmazione. In questo tutorial usiamo JavaScript.
L'interfaccia di programmazione per il DOM è definito da una proprietà e metodi set standard.
Properties sono spesso indicati come qualcosa che è (cioè nome nodo è "book").
Methods sono spesso indicati come qualcosa che viene fatto (cioè eliminare "libro").
Proprietà DOM XML
Queste sono alcune proprietà tipiche DOM:
- x.nodeName - il nome di x
- x.nodeValue - il valore di x
- x.parentNode - il nodo principale di x
- x.childNodes - i nodi figlio di x
- x.attributes - gli attributi nodi di x
Nota: Nella lista di cui sopra, x è un oggetto nodo.
Metodi DOM XML
- x.getElementsByTagName( name ) - ottenere tutti gli elementi con un nome tag specificato
- x.appendChild( node ) - inserire un nodo figlio di x
- x.removeChild( node ) - rimuovere un nodo figlio da x
Nota: Nella lista di cui sopra, x è un oggetto nodo.