El DOM define un estándar para acceder y manipular documentos.
El DOM XML presenta un documento XML como una estructura de árbol.
El HTML DOM presenta un documento HTML como una estructura de árbol.
La comprensión del DOM es una necesidad para cualquier persona que trabaje con HTML o XML.
Ejemplo XML DOM árbol
¿Qué es el DOM?
El DOM define un estándar para acceder a documentos como XML y 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."
El DOM se divide en 3 partes / niveles diferentes:
- Core DOM - modelo estándar para cualquier documento estructurado
- XML DOM - modelo estándar para documentos XML
- HTML DOM - modelo estándar para documentos HTML
El DOM define los objects and properties de todos los elementos del documento, y el methods (interface) para acceder a ellos.
El DOM HTML
El HTML DOM define una manera estándar para acceder y manipular documentos HTML.
Todos los elementos HTML se puede acceder a través del DOM HTML.
El DOM HTML define los objects, properties and methods de todos los elementos HTML.
Cambiar el valor de un elemento HTML
En este ejemplo se cambia el valor de un elemento HTML con id = "demo":
Ejemplo
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script> Inténtalo tú mismo " En este ejemplo se cambia el valor de la primera <h1> elemento en un documento HTML:
Ejemplo
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script> Inténtalo tú mismo " Nota: Incluso si el documento HTML containes solamente UN <h1> elemento que todavía tiene que especificar el índice de matriz [0], debido a que el getElementsByTagName() método siempre devuelve una matriz.
Usted puede aprender mucho más sobre el DOM HTML en nuestro tutorial de Javascript .
El DOM XML
El DOM XML define una forma estándar para acceder y manipular documentos XML.
Todos los elementos XML se puede acceder a través del DOM XML.
El DOM XML define los objects, properties and methods de todos los elementos XML.
El DOM XML es:
- Un modelo de objetos estándar para XML
- Una interfaz de programación estándar para XML
- La plataforma y del independiente del lenguaje
- Un estándar de la W3C
En otras palabras: The XML DOM is a standard for how to get, change, add, or delete XML elements.
Obtener el valor de un elemento XML
Este código recupera el valor de texto de la primera <title> elemento en un documento XML:
Ejemplo
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Carga de un archivo XML
El archivo XML utilizado en los ejemplos a continuación es books.xml .
En este ejemplo se lee "books.xml" en xmlDoc y recupera el valor de texto de la primera <title> elemento en books.xml:
Ejemplo
<!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>
Inténtalo tú mismo " ejemplo Explicación
- xmlDoc - el objeto DOM XML creado por el analizador.
- getElementsByTagName("title")[0] - obtener el primer <title> elemento
- childNodes[0] - el primer hijo de la <title> elemento (el nodo de texto)
- nodeValue - el valor del nodo (the text itself)
Cargando una cadena XML
En este ejemplo se carga una cadena de texto en un objeto DOM XML, y extrae la información de él con JavaScript:
Ejemplo
<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>
Inténtalo tú mismo " Interfaz de programación
El XML modelos DOM como un conjunto de objetos de nodo. Los nodos se puede acceder con el lenguaje Java u otros lenguajes de programación. En este tutorial usamos JavaScript.
La interfaz de programación para el DOM está definida por unas propiedades y métodos estándar establecido.
Properties se refieren a menudo como algo que es (es decir, nombre de nodo es "libro").
Methods se refieren a menudo como algo que se hace (es decir, eliminar "libro").
Propiedades DOM XML
Estas son algunas de las propiedades típicas de DOM:
- x.nodeName - el nombre de x
- x.nodeValue - el valor de x
- x.parentNode - el nodo padre de x
- x.childNodes - los nodos hijos de x
- x.attributes - los atributos de los nodos x
Nota: En la lista anterior, x es un objeto de nodo.
Métodos DOM XML
- x.getElementsByTagName( name ) - obtener todos los elementos con un nombre de etiqueta especificada
- x.appendChild( node ) - insertar un nodo hijo de x
- x.removeChild( node ) - quitar un nodo hijo de x
Nota: En la lista anterior, x es un objeto de nodo.