Given an HTML document, the task is to get the entire document as a string using JavaScript. Here few methods are discussed:
-
getElementsByTagName() Method
This method returns a set of all elements in the document with the defined tag name, as a NodeList object.
This object represents a collection of nodes, Which are accessed by index numbers. The index starts at 0.
Syntax:document.getElementsByTagName(tagname)
Parameters:
- tagname: This parameter is required. It specifies the tagname of the elements to get.
-
HTML DOM innerHTML Property
This property set/return the HTML content (inner HTML) of an element.
Syntax:-
Return the innerHTML property:
HTMLElementObject.innerHTML
-
Set the innerHTML property:
HTMLElementObject.innerHTML = text
Parameters:
- text: It specifies the HTML content of an element.
Return Value:
It returns a string, representing the HTML content of an element. -
Return the innerHTML property:
Example 1: This example gets the whole document as string using document.documentElement.innerHTML.
<!DOCTYPE html> < html > < head > < title > JavaScript | Get the entire document HTML as a string. </ title > </ head > < body style = "text-align:center;" id = "body" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;" > </ p > < button onclick = "GFG_Fun(); " > click here </ button > < script > var up = document.getElementById('GFG_UP'); up.innerHTML = 'Click on the button to convert whole document to string'; function GFG_Fun() { var string = document.documentElement.innerHTML; alert(string); } </ script > </ body > </ html > |
Output:
-
Before clicking the button:
-
After clicking the button:
Example 2: This example gets the whole document by first selecting the elements with tagname ‘HTML’ and selecting the first element by indexing using document.getElementsByTagName(‘html’)[0].innerHTML.
<!DOCTYPE html> < html > < head > < title > JavaScript | Get the entire document HTML as a string. </ title > </ head > < body style = "text-align:center;" id = "body" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;" > </ p > < button onclick = "GFG_Fun(); " > click here </ button > < script > var up = document.getElementById('GFG_UP'); up.innerHTML = 'Click on the button to convert whole document to string'; function GFG_Fun() { var string = document.getElementsByTagName('html')[0].innerHTML; alert(string); } </ script > </ body > </ html > |
Output:
-
Before clicking the button:
-
After clicking the button:
- Supported browsers:
- Google Chrome
- Mozila Firefox
- Internet Explorer
- Safari
- Opera