Ejemplo 8: API DOM XML con JavaScript

Parsea, recorre y modifica XML directamente en el navegador, sin recargar la página

🎯 ¿En qué consiste este ejemplo?

A diferencia de los ejemplos anteriores (procesados en PHP en el servidor), este funciona enteramente en tu navegador, con JavaScript. Usa DOMParser para convertir texto en un documento XML real, createElement() / appendChild() para modificarlo, y XMLSerializer para volver a convertirlo en texto. Todo ocurre en memoria, al instante, sin enviar nada al servidor.

Editor XML

Añadir libro (createElement + appendChild)

Buscar por título (getElementsByTagName)

Estado

ℹ️ Pulsa "Parsear XML" para empezar

Documento XML actual (serializado con XMLSerializer)


                        

                    

                


                

                    
📖 Explicación del Código

                    

                        

                            
Código JavaScript Completo (resumido)

                            
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(texto, "application/xml");

const raiz = xmlDoc.getElementsByTagName("biblioteca")[0];
const nodoLibro = xmlDoc.createElement("libro");
const nodoTitulo = xmlDoc.createElement("titulo");
nodoTitulo.textContent = "Nuevo libro";
nodoLibro.appendChild(nodoTitulo);
raiz.appendChild(nodoLibro);

const serializer = new XMLSerializer();
const textoFinal = serializer.serializeToString(xmlDoc);

                        


                        

                            

                                
📝 DOMParser

                                
const xmlDoc = new DOMParser().parseFromString(texto, "application/xml");

                                
¿Qué hace? Convierte una cadena de texto en un documento XML navegable por el navegador, igual que simplexml_load_string() hace en PHP, pero en el lado del cliente.

                                

                                    
💡 Concepto: parsererror

                                    
Si el XML no es válido, parseFromString no lanza una excepción: inserta un elemento <parsererror> dentro del documento resultante, y hay que comprobarlo manualmente con querySelector('parsererror').

                                

                            


                            

                                
📝 createElement() y appendChild()

                                
const nodo = xmlDoc.createElement("libro");
raiz.appendChild(nodo);

                                
¿Qué hace? createElement() crea un nodo nuevo (todavía "flotando", sin sitio en el árbol). appendChild() lo inserta como último hijo de otro nodo, modificando el árbol DOM en memoria.

                            


                            

                                
📝 XMLSerializer

                                
const texto = new XMLSerializer().serializeToString(xmlDoc);

                                
¿Qué hace? Hace el proceso inverso a DOMParser: convierte el árbol DOM (ya modificado) de nuevo a una cadena de texto XML, que es lo que se muestra en el editor y en la salida.

                            

                        

                    

                


                

                    
🎯 Conceptos Clave Aprendidos

                    

                        

                            
DOM XML en el navegador

                            
    
                                
  • DOMParser convierte texto en árbol
    • 
                                
  • XMLSerializer convierte árbol en texto
    • 
                                
  • Todo ocurre sin recargar la página
    • 
                            

                        

                        

                            
Modificar el árbol

                            
    
                                
  • createElement() crea nodos nuevos
    • 
                                
  • appendChild() los inserta
    • 
                                
  • textContent fija su contenido
    • 
                            

                        

                        

                            
Recorrer y buscar

                            
    
                                
  • getElementsByTagName() busca por etiqueta
    • 
                                
  • Devuelve una colección tipo array
    • 
                                
  • Se puede combinar con .textContent para filtrar
    • 
                            

                        

                    

                


                

                    
💪 Ejercicio Práctico

                    

                        
Amplía la manipulación del DOM

                        
    
                            
  1. Parsea el XML, añade dos libros nuevos y busca por una palabra del título
    2. 
                            
  2. Provoca un error a propósito (borra una etiqueta de cierre) y observa el mensaje de parsererror
    3. 
                            
  3. Piensa cómo eliminarías un libro del documento (pista: removeChild() sobre su nodo padre)
    4. 
                        

                        

                            
                            

                                

                                    
Eliminar un nodo con removeChild()

                                    
const libros = xmlDoc.getElementsByTagName("libro");
const primerLibro = libros[0];
primerLibro.parentNode.removeChild(primerLibro);

                                    
removeChild() se llama sobre el padre, indicándole qué hijo concreto eliminar.