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.
- 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>w3wiki</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" >w3wiki</ 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: