How to parse HTML DOM with DOMDocument ?

What is DOM Parser?

DOM Parser is a JavaScript library that parses HTML or XML documents into their corresponding Document Object Model (DOM).

HTML is a markup language that describes the structure of web pages. The DOM is a tree representation of the document. In order to create a page, you need to parse the HTML code into its corresponding DOM using DOM Parser.

DOM Parser is a very useful tool for developers who want to manipulate HTML/XML documents. It allows them to easily extract information from the DOM tree.

How to Parse HTML DOM with DOM Document? 

We can parse a string containing HTML and access elements by following 2  different methods.

• Using DOMParser.parseFromString() to access the elements from HTML.
• Using Document.getElementById()  to access the elements from HTML.

DOMParser.parseFromString(): 

The parseFromString() method parses a string containing either HTML or XML, returning an HTML Document or XML Document.

Syntax:

parseFromString(string, mimeType)

Parameters:

• string: The string contains either an XML, HTML, xhtml+xml, or SVG document.
• mimeType: This determines whether the parsed string is HTML or XML.

1. text/xml
2. text/html

The value in the text/xml will call the XML parser and text/html by the HTML parser.

Example 1:

• This code parses HTML strings into DOM nodes. It takes two arguments: the first one is the string to be parsed, and the second one is the type of content being parsed. The return value is a Document object representing the root of the HTML document.
• DOMParser()  is a constructor function that creates a new DOMParser object. It can be used to parse XML or HTML source code from a string into a DOM Document.
• htmlString, title, site variables is a string that contains HTML code. It will be parsed by the DOMParser object and the result will be printed in the console.
• The DOMParser is a constructor that creates an object with the method parseFromString(). This method takes two arguments, the first one is a string of HTML and the second one is a MIME type. The MIME type tells us what kind of data we are parsing. In this case, it's HTML.
• This is a method that returns the text content of the first child of an element. It's used to get the text content from a node.

Output :

Example 2: 

Document.getElementById(): It returns the element with the given ID. The function takes two arguments: the document object and the id string.

• This code changes the color of a paragraph when you press one of the two buttons.
• It takes in a parameter, 'newColor', and uses it to change the color of the element with id 'one'.

Output: