XMLSerializer & DOMParser

In the context of JavaScript, XMLSerializer allows you to serialize a node or a group of nodes into a valid XML string. This allows you to send an XML/HTML representation of your web page elements to another server or database. And, if you want to "undo" that process, you can use the DOMParser. In this topic, you will learn about XMLSerializer and DOMParser. To get the hang of it, we will go through some of the examples. Let's get started.

XMLSerializer

The XMLSerializer is an interface that provides the serializeToString() method to return a serialized subtree of a string. In other words, the XMLSerializer serializes the DOM trees, by converting them into strings that contain XML. For instance, you can serialize Document that represents any web page in the browser. Document is also an entry point into a webpage, or an entry to the DOM tree. If you want to serialize Document, all you have to do is use the XMLSerializer.serializeToString() method. Let's study how to serialize an XML document:

First and foremost, you need to create a DOM tree. To serialize the DOM tree doc into XML text, use the XMLserializer.serializeToString() method. Here is an example:

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);

Let's go through this example of how to serialize HTML documents. In this case, DOM is an HTML document. Simply, use the Element.innerHTML property or the Element.outerHTML property. Use Element.innerHTML if you want just the descendants of the specified node and Element.outerHTML if you want the node and all its descendants. Here is an example of using the Element.innerHTML:

const docInnerHtml = document.documentElement.innerHTML;

ThedocInnerHtml results in a string containing the HTML of the contents of the document. In other words, the contents of the body element.

Here is an example of using Element.outerHTML:

const docOuterHtml = document.documentElement.outerHTML;

This outputs the HTML corresponding to the body and its descendants.

DOMParser

The DOMParser is an interface that provides the ability to parse XML or HTML source code from a string to a DOM Document. In the previous step, you've learned that The XMLSerializer interface does the opposite thing: it converts a DOM tree into an XML or HTML source. To create a new DOMParser object, use the DOMParser() constructor.

In the case of an HTML document, with the new DOM trees built from HTML, you can replace portions of the DOM simply by setting the values of the Element.innerHTML and Element.outerHTML properties. These properties can also fetch HTML fragments corresponding to the DOM subtree.

To parse a string using the HTML parser or the XML Parser, you will use the DOMParser.parseFromString() method. This method returns an HTMLDocument or XMLDocument. This is the full method syntax:

parseFromString(string, mimeType)

The first parameter is the string, which is to be parsed. This parameter must contain either an HTML, XML, XHTML+XTML or SVG document. The second parameter is the mimeType which is also of string type. However, this string determines if the XML parser or the HTML parser is used to parse the string. Valid values of mimeType are:

• text/html

• text/xml

• application/xml

• application/xhtml+xml

• image/svg+xml

The difference is that the text/html invokes the HTML parser, and returns an HTML document, while text/xml, application/xml, application/xhtml+xml, and image/svg+xml invoke the XML parser thus returning XML Document. Any other value is invalid and will result in the TypeError thrown.

Using DOMParser to Parse HTML Strings

Let's go through an example of using DOMParser to Parse HTML Strings:

First, you instantiate a new DOMParser and pass it your HTML string using parseFromString(). We will store the string into a variable called htmlContent:

let parser = new DOMParser();
let parsedHtml = parser.parseFromString(htmlContent, 'text/html');

Now, parsed HTML is a DOM object that you can interact with. Let’s go and extract a few things from the DOM object:

let firstImg = parsedHtml.images[0].src;
let liElements = parsedHtml.getElementsByTagName("ul")[1].children;

Conclusion

In this topic, you've learned about XMLSerializer and DOMParser. To summarize, XMLSerializer allows you to serialize a node or a group of nodes into a valid XML string, and DOMParser provides the ability to parse XML or HTML source code from a string to a DOM Document. To serialize the DOM tree document into XML text, use the XMLserializer.serializeToString() method. To parse a string using the HTML parser or the XML Parser, you will use the DOMParser.parseFromString() method.

Let's put your knowledge of XMLSerializer and DOMParser to the test.