Tutorial de XML DOM

¿Qué es el DOM?

DOM define los estándares para acceder y operar con documentos:

“El modelo de objeto de documento W3C (DOM) es una interfaz independiente de plataforma y lenguaje que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo del documento.”

DOM HTML define los métodos estándar para acceder y operar con documentos HTML. Presenta el documento HTML como una estructura de árbol.

XML DOM define los métodos estándar para acceder y operar con documentos XML. Presenta el documento XML como una estructura de árbol.

Para cualquier persona que utilice HTML o XML, es esencial entender el DOM.

DOM HTML

Todos los elementos HTML pueden accederse a través del DOM HTML.

Ejemplo 1

Este ejemplo cambia el valor del elemento HTML con id="demo":

<h1 id="demo">Este es el título</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Prueba por tu cuenta

Ejemplo 2

Este ejemplo cambia el valor del primer elemento <h1> en el documento HTML:

<h1>Este es el título</h1>
<h1>Este es el título</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Prueba por tu cuenta

Nota:Incluso si el documento HTML solo contiene un elemento <h1>, debes especificar el índice de array [0], porque el método getElementsByTagName() siempre devuelve un array.

Puedes aprender más sobre HTML DOM en nuestro tutorial de JavaScript.

DOM de XML

Todos los elementos XML pueden ser accedidos a través de XML DOM.

XML DOM es:

  • Modelo de objetos estándar de XML
  • Interfaz de programación estándar de XML
  • Independiente de la plataforma y el lenguaje
  • Estándar W3C

En otras palabras: XML DOM es el estándar para obtener, modificar, agregar o eliminar elementos XML.

Obtener el valor de un elemento XML

Este ejemplo busca el valor de texto del primer elemento <title> en el documento XML:

Ejemplo

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

Cargar archivo XML

El archivo XML utilizado en el siguiente ejemplo es books.xml.

Este ejemplo lee "books.xml" en xmlDoc y busca el valor de texto del primer elemento <title> en books.xml:

Ejemplo

<!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>

Prueba por tu cuenta

Explicación del ejemplo

  1. xmlDoc - Objeto DOM XML creado por el analizador
  2. getElementsByTagName("title")[0] - Obtener el primer elemento <title>
  3. childNodes[0] - Primer nodo hijo del elemento <title> (nodo de texto)
  4. nodeValue - Valor del nodo (texto en sí)

Cargar cadena XML

Este ejemplo carga una cadena de texto en un objeto DOM XML y utiliza JavaScript para extraer información de él:

Ejemplo

<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>

Prueba por tu cuenta

Interfaz de programación

DOM modela XML en un conjunto de objetos de nodo. Se puede acceder a los nodos utilizando JavaScript u otros lenguajes de programación. En este tutorial, utilizamos JavaScript.

El interfaz de programación de DOM se define por un conjunto de atributos y métodos estándar.

AtributosGeneralmente se refiere a qué es la cosa (por ejemplo, nodename es "book").

MétodosGeneralmente se refiere a lo que se puede hacer (por ejemplo, eliminar la acción de "book").

Atributos de XML DOM

Estos son algunos atributos típicos de DOM:

  • x.nodeName - Nombre de x
  • x.nodeValue - Valor de x
  • x.parentNode - Nodo padre de x
  • x.childNodes - Nodos hijos de x
  • x.attributes - Nodos de atributos de x

Notas:En la lista superior, x es un objeto de nodo.

XML DOM 方法

  • x.getElementsByTagName(name) - Obtener todos los elementos con nombre de etiqueta especificado
  • x.appendChild(nodo) - Insertar un subnodo en x
  • x.removeChild(nodo) - Eliminar subnodo de x

Notas:En la lista superior dex Es un objeto de nodo.