How to parse HTML DOM with DOMDocument ?

Last Updated : 14 Dec, 2022

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.

text/xml
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.

Javascript

<script> 
  const one = new DOMParser(); 
  const site = "<h1>GeeksforGeeks</h1>"; 
  const title="<h3>Parse Html DOM with DOMDocument</h3>"; 
  const htmlString = "<p>Html parsed</p>"; 
  const final = one.parseFromString(site, "text/html"); 
  console.log(final.body.firstChild.textContent); 
  const final1 = one.parseFromString(title, "text/html"); 
  console.log(final1.body.firstChild.textContent); 
  const final2 = one.parseFromString(htmlString, "text/html"); 
  console.log(final2.body.firstChild.textContent); 
</script>

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’.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <script> 
        function changeColor(newColor) { 
              const elem = document.getElementById('one'); 
              elem.style.color = newColor; 
        } 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Parse HTML with DOM</h3> 
    <p id="one">Color after button pressed</p> 
    <P>Press button to turn pink</P> 
    <button onclick="changeColor('pink');"> 
        Pink 
    </button> 
    <br /> 
    <P>Press button to turn blue </P> 
    <button onclick="changeColor('blue');"> 
        Blue 
    </button> 
</body> 
  
</html>