<body>
  <div>
    <button onclick="GetLocation()">reset</button><br />
    <br />
    javascript<br />
    let url = new URL("http://blog.danggun.net:8080/test/test.html?id=1111&test=22222#asdfasdf");<br />
    url.hash = <label id="labHash"></label><br />
    url.host = <label id="labHost"></label><br />
    url.hostname = <label id="labHostname"></label><br />
    url.pathname = <label id="labPathname"></label><br />
    url.href = <label id="labHref"></label><br />
    url.origin = <label id="labOrigin"></label><br />
    url.port = <label id="labPort"></label><br />
    url.protocol = <label id="labProtocol"></label><br />
    url.search = <label id="labSearch"></label><br />
    
  </div>
</body>
function GetLocation() 
{      
  let url = new URL("http://blog.danggun.net:8080/test/test.html?id=1111&test=22222#asdfasdf");
  document.querySelector("#labHash").innerText = url.hash;
  document.querySelector("#labHost").innerText = url.host;
  document.querySelector("#labHostname").innerText = url.hostname;
  document.querySelector("#labPathname").innerText = url.pathname;
  document.querySelector("#labHref").innerText = url.href;
  document.querySelector("#labOrigin").innerText = url.origin;
  document.querySelector("#labPort").innerText = url.port;
  document.querySelector("#labProtocol").innerText = url.protocol;
  document.querySelector("#labSearch").innerText = url.search;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.