What is the document.URL property in DOM?

The document.URL property in DOM

Developers often need to display the URL of some relevant web pages when developing their websites. This is where the DOM URL Property comes into use. It allows them to show the URL accordingly and directs the incoming traffic on their website to other web pages, thus ensuring better surfing and user interaction.

Let's see the visualization of what we are trying to address in this Answer:

Syntax

Return value

This property returns a string, which is the URL of the current HTML document. The string obtained also specifies the webpage's communication protocol, such as HTTPS or HTTP.

Code

Let's look at a working code example that elaborates on the essential use of this property:

Explanation

The explanation for the code in the HTML tab is the following:

• Lines 5–9: We make a parent <div> with an id set to the value content that contains all the HTML elements mentioned below:

  • Line 6: This line includes the <img> tag, which helps render the Educative logo, as seen in the output tab above.

  • Line 7: Here we have a placeholder <p> tag, which will be populated by the URL as soon as the user clicks on the <button> tag present on line 8.

  • Line 8: This <button> listens to the onclick event from the user and calls the method of getURL(), which is present in the JavaScript tab of the code widget above.

Let's look at the explanation of the getURL() method contained in the JavaScript tab:

• Line 2: In this line, we declare a new variable, educative and assign it the value returned by document.URL.

• Line 3: We use the document.getElementById() method to get hold of the placeholder <p> tag. Then we use the innerHTML property to populate it with the fetched URL as seen in the output tab.