Introducción a las dos API de DOMParser y XMLSerializer

Uno, comprende el método DOMParser

DOMParser puede analizar cadenas HTML en árboles DOM y los tipos de formato incluyen documentos XML o documentos HTML.

gramática

var domParser = nuevo DOMParser ();

Este domParseres un objeto DOMParser.

El objeto DOMParser contiene un método llamado parseFromString.

La sintaxis del método es la siguiente :

var doc = domParser.parseFromString (cadena, mimeType);

Este método devuelve un documento HTML o un documento XML según el valor del parámetro mimeType.

Los parámetros específicos son los siguientes :

cuerda

Necesario. Cuerda. Representa la cadena DOM (DOMString) utilizada para el análisis. Debe incluir contenido del documento HTML, xml, xhtml + xml o svg; de lo contrario, puede analizar el error.

tipo de Mimica

Necesario. Cuerda. Indica el tipo de documento que se va a analizar y admite los siguientes valores de parámetro:

mimeType valor	Tipo de documento de devolución
texto / html	Documento
texto / xml	XMLDocument
aplicación / xml	XMLDocument
aplicación / xhtml + xml	XMLDocument
imagen / svg + xml	XMLDocument

Entre ellos, el tipo de documento Documento incluirá automáticamente <html>y <body>etiquetas, mientras que el tipo de documento XMLDocument no agregará <html>ni <body>esperará etiquetas de manera activa y , según mi prueba, muchas etiquetas HTML comunes a veces tienen errores de análisis de error de análisis.

por ejemplo:

var domParser = nuevo DOMParser (); 
console.dir (domParser.parseFromString ('<p> 内容 </p>', 'texto / html'));

La estructura de árbol DOM del documento devuelto en este momento se muestra en la captura de pantalla a continuación, <html>y aparecen <body>etiquetas que no están en los parámetros de la cadena DOM .

La estructura del tipo de documento incluye html y body

Sin embargo, si el mimeType que configuramos es text/xmlel mismo, devolverá otra estructura de árbol del documento:

var domParser = nuevo DOMParser (); 
console.dir (domParser.parseFromString ('<p> 内容 </p>', 'texto / xml'));

Los resultados de salida de la consola son los siguientes:

Captura de pantalla de salida del árbol de documentos

compatibilidad

El método DOMParser es compatible con IE9 +.

Dos, entender el método XMLSerializer

La función del método XMLSerializer es la opuesta a DOMParser. XMLSerializer puede serializar objetos de árbol DOM en cadenas.

gramática

var xmlSerializer = new XMLSerializer ();

Este xmlSerializeres un objeto XMLSerializer.

El objeto XMLSerializer tiene un serializeToString()método denominado que puede devolver una cadena xml serializada.

La sintaxis es la siguiente:

var xmlString = xmlSerializer.serializeToString (rootNode);

El valor de retorno es de tipo DOMString.

parámetro

rootNode

Tiene que. El nodo raíz del árbol DOM utilizado para convertir a una cadena.

P.ej:

var xmlSerializer = new XMLSerializer (); 
console.log (xmlSerializer.serializeToString (document.querySelector ('. link')));

Ejecuto el código JS anterior en la consola correspondiente a este artículo, y el resultado es el siguiente:

prueba del método serializeToString

Diferencia del atributo externalHTML

serializeToString()El método es outerHTMLsimilar a algunos, pero aún existen diferencias. Existen principalmente los dos siguientes:

externalHTML solo se puede usar en elementos Element, pero no puede ser de otros tipos de nodo, como nodos de texto y nodos de comentarios. Pero el serializeToString()método es aplicable a cualquier tipo de nodo. incluir:

Tipo de nodo	Paráfrasis
Tipo de Documento	Tipo de Documento
Documento	Documentación
DocumentFragment	Fragmento de documento
Elemento	elemento
Comentario	Nodo de comentario
Texto	Nodo de texto
ProcesamientoInstrucción	Instrucciones de procesamiento
Attr	Nodo de atributo

serializeToString()El método agregará automáticamente el espacio de nombres xmlns al elemento raíz. Por ejemplo, compare los resultados de salida de los dos códigos siguientes:
```
div = document.createElement ('div'); 
// 1. 
console.log (div.outerHTML); 
// 2. 
var xmlSerializer = new XMLSerializer (); 
console.log (xmlSerializer.serializeToString (div));
```
El resultado de salida es el siguiente:

compatibilidad

El método DOMParser es compatible con IE9 +.

Tres, ejemplos de aplicación

1. Elimina los saltos de línea y los comentarios en cadenas HTML.

Primero pruebe el HTML de la siguiente manera, colóquelo en una plantilla de script personalizada:

<script id = "tpl" type = "text / template"> 
<! - Este es el comentario 1 -> 
<p> Este es el texto. </p> 
<! - Esta es la nota 2 -> 
<ol> 
    <li> Lista </li> 
    <li> Lista </li> 
    <li> Lista </li> 
</ol> 
</script>

Para que sea más fácil de leer y mantener, las plantillas HTML incluyen sangrías y comentarios, pero el análisis real y estos no son necesarios y deben eliminarse. Además del reemplazo regular de cadenas, también puede intentar usar un navegador para algunos métodos nativos de la API DOM, como DOMParse, el código JavaScript es el siguiente:

var htmlTpl = tpl.innerHTML; 
// Convierte una cadena en un tipo de documento 
var domParser = new DOMParser (); 
var doc = domParser.parseFromString (htmlTpl, 'text / html'); 

// Usa el TreeWalker nativo para atravesar 
var treeWalker = document.createTreeWalker (doc); 
var arrNodeRemove = []; 
// Traverse nodos de comentarios y nodos de texto de nueva línea 
, mientras que (treeWalker.nextNode ()) { 
    nodo var = treeWalker.currentNode; 
    si (node.nodeType == Node.COMMENT_NODE | | (node.nodeType == Node.TEXT_NODE && node.nodeValue.trim () == '')) { 
        arrNodeRemove.push (nodo); 
    } 
} 
// Eliminación de nodo 
arrNodeRemove.forEach (función (nodo) { 
    node.parentNode .removeChild (nodo); 
}); 
// restauración de cadena
console.log (doc.body.innerHTML);
// La salida es: 
// <p> Este es texto. </p><ol><li>Lista</li><li>Lista</li><li>Lista</li> </ol>

La captura de pantalla del navegador Chrome es la siguiente:

Contenido de caracteres HTML después de procesar limpio

Como puede ver, se eliminaron los comentarios relacionados con cadenas HTML y espacios de nueva línea. La ventaja de usar el método DOMParser es que es más fácil de entender y usar que el reemplazo de expresiones regulares. Debido al uso del análisis integrado del navegador, Los caracteres HTML son tolerantes a errores. Más fuerte, el uso de expresiones regulares puede no ser completo. La desventaja es que la cantidad de código es relativamente grande.

Cuatro, conclusión

Cuando resolví y estudié este artículo hoy, descubrí que todavía no sé mucho sobre las API DOM nativas. Por ejemplo, NodeIterator y TreeWalker son API nativas compatibles con los navegadores IE9 +. Tengo la oportunidad de presentarlas en el futuro. La proporción de desarrolladores como la API DOM nativa es muy baja y la probabilidad de nuestro uso diario no es alta, sin embargo, si quieres convertirte en un creador, un excelente creador de frameworks, ese aprendizaje es fundamental.

Documentos de referencia:

¡Gracias por leer!