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.
<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’.
<!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>
|
Output: