Show Domain Name of the Server with JavaScript

Javascript Web Development Front End Technology

We use the window.location.hostname property of the document object to show the domain name of the server that loaded the document using JavaScript. The document object, part of the DOM, corresponds to the current web page that the browser has loaded. It Contains all the information about the condition of the browser as well as the web page.

Every resource or computer that is available on the internet has an address that is either IPV4 (192.88.99.255) or IPV6 (2001:db8:3333:4444:5555:6666:7777:8888). These addresses are good for computers but not for us. domain name system is a layer of abstraction over that organization of addressing by providing domain names of these addresses.

The IP addresses of google.com are IPV4 - 142.250.183.174 and IPV6 - 2404:6800:4009:825::200e respectively. It would be a bit too nasty to remember this address, and we have hundreds of them to remember. The domain name system makes it easy for us to remember the location of webpages by simple syntactic names.

Using the window.location.hostname Property

The window.location object is an important asset if one is interested in to know the URL and the various attributes it consists of. It contains a list of properties such as

window.location.protocol
window.location.port
window.location.pathname
window.location.hostname
window.location.host

The hostname property returns the domain name of the webpage.

So, for a typical URL like

https://www.tutorialspoint.com/java-testing-learn-from-scratch/index.asp

The domain name is www.tutorialspoint.com

Syntax

var myDomain = window.location.hostname;

We call the hostname property and store its returned value which is a string in the variable myDomain.

Let's look at an example to understand better.

Example 1

In the code snippet below, we extract the hostname and log it in the body of HTML.



<!DOCTYPE html>
<html>
<body>
   <div id = "result"> </div>
   <script>
      var myDomain = window.location.hostname;
      document.getElementById("result").innerHTML = "<br>Domain name of the server that loaded the document: "+ myDomain;
   </script>
</body>
</html>

Using the window.location.host Property

The window.location.host also returns the domain name of the webpage, but in addition, it also returns the port number followed by the domain name which is an extra piece of information. Both host and hostname will return the same result most of the time unless the port number is specified in the URL.

Syntax

var myDomain = window.location.host;

We call the hostname property and store its returned value which is a string in the variable myDomain.

Let's look at an example to understand better.

Example 2

In the below program, we extract the host property of the webpage and log it in the body of HTML.



<!DOCTYPE html>
<html>
<body>
   <div id = "result"> </div>
   <script>
      var myDomain = window.location.host;
      document.getElementById("result").innerHTML = "<br>Domain name of the server that loaded the document: "+ myDomain;
   </script>
</body>
</html>

We can use the hostname property on links that are already present in the HTML document also.

for(var i = 0 ; i < document.links.length ; i++){
   var ithHostname = document.links[i].hostname;
}

Here, we find the number of links present in the document and then traverse them to find their hostname and store it in ithHostname.

Let's understand this better with an example ?

Example 3

In the below code snippet, we have multiple links to different open source sites as well as tutorials to HTML and CSS. We refer the links of the document using above syntax and log the domain name of all the links.



<!DOCTYPE html>
<html>
<body>
   <a href="https://www.tutorix.com/">Tutorix</a>
   <br>
   <a href="https://www.tutorialspoint.com/javascript/">JavaScript</a>
   <br>
   <a href="https://tools.tutorialspoint.com/">Tools </a>
   <br>
   <a href="https://www.tutorialspoint.com/html5/">HTML</a>
   <br>
   <a href="https://www.tutorialspoint.com/css/">CSS</a>
   <br>
   <br>
   <button onclick = "displayHostName()">Find Domains !</button>
   <div id = "result"> </div>
   <script>
      function displayHostName(){
         var numberOfLinks = document.links.length;
         var resultDiv = document.getElementById("result");
         var text = "";
         for(var i = 0 ; i < numberOfLinks ; i++){
            var linkName = document.links[i].text;
            var hostname = document.links[i].hostname;
            text += linkName + " -> " + hostname + "<br>";
         }
         resultDiv.innerHTML = text;
      }
   </script>
</body>
</html>

The find Domains button triggers the displayHostName() javascript function which traverses on all the links in the HTML document one by one and logs their domain name in the HTML body.

Conclusion

In this tutorial, we discussed two main properties to get the domain name server that loaded a document. These are window.location.hosname and window.location.host.

Abhishek Kumar

Updated on: 2022-09-21T07:40:55+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started