Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Location Object

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Location Object

      Window Location Object

      The location object in JavaScript provides information about the browser's location, i.e., URLs. It is a built-in property of both the window and document objects. We can access it using either window.location or document.location.
      The 'location' object contains various properties and methods to get and manipulate the information of the browser's location (URL).

      JavaScript Location Object Properties

      We can use the properties of the location object to get information of URL:
      • hash − This property is used to set or get the anchor part of the URL.
      • host − This property is used to set or get the hostname or port number of the URL.
      • hostname − This property is used to set the hostname.
      • href − This property is used to set or get the URL of the current window.
      • origin − This property returns the protocol, domain, and port of the URL.
      • pathname − This property updates or gets the path name.
      • port − This property updates or gets the port of the URL.
      • protocol − This property updates or gets the protocol.
      • search − This property is used to set or get the query string of the URL.

      Syntax

      Follow the syntax below to access the location object's properties and methods
      window.location.property;
      OR
      location.property;
      You may use the 'window' object to access the 'location' object.
      Here, we have demonstrated the use of some properties of the location object with examples.

      Example: Accessing location host property

      The location.host property returns the host from the current URL. However, you can also change the host using it.
      In the below code, we extract the host from the URL. You can see that it returns 'www.tutorialspoint.com'.
      <html>
      <body>
         <div id="output"></div>
         <script>
            const host = location.host;
            document.getElementById("output").innerHTML =
      	  "The host of the current location is: " + host;
         </script>
      </body>
      </html>

      Output

      The host of the current location is: www.tutorialspoint.com

      Example: Accessing location protocol property

      The location.protocol propery is used to get used in the current URL. You can also use it to update the protocol.
      Try the following example to use the location.protocol property
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            document.getElementById("output").innerHTML = 
            "The protocol of the current location is: " + location.protocol;    
         </script>
      </body>
      </html>

      Output

      The protocol of the current location is: https:

      Example: Accessing location hostname property

      The location.hostname property returns the host name of the current URL. You can use it to the hostname as well.
      Try the following example to use location.hostname property –
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            document.getElementById("output").innerHTML = 
            "The host name of the current location is: " + location.hostname;    
         </script>
      </body>
      </html>

      Output

      The host name of the current location is: www.tutorialspoint.com
      

      Example: Accessing location pathname property

      The location.pathname property returns the path name of the current location. You can set the path name using it.
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            document.getElementById("output").innerHTML = 
            "The protocol of the current location is: " + location.pathname;    
         </script>
      </body>
      </html>

      Output

      The protocol of the current location is: /javascript/javascript_location_object.htm

      JavaScript Location Object Methods

      We can also use the methods of the location object to navigation to new URLs −
      • assign(url) − This method loads a new document at the specified URL.
      • replace(url) − This method replaces the current document with a new document at the specified URL.
      • reload() − This method reloads the current document.

      JavaScript location assign() method

      The location.assign() method takes the URL and changes the URL in the current window. In short, it opens a new web page.

      Syntax

      Follow the syntax below to use the location.assign() method in JavaScript −
      location.assign();

      Example

      In the below code, when you click the 'Go to home page' button, it will redirect you to the home page of the tutorialpoint website.
      <html>
      <body>
         <div id="output"></div>
         <button onclick="changePage()">Go to Home Page</button>
         <script>
            let output = document.getElementById("output");
            function changePage() {
      	     window.location.assign("https://www.tutorialspoint.com/");
            }
         </script>
      </body>
      </html>

      Location Object Properties List

      Here, we have listed all properties of the Location object.
      Property
      Description
      hash
      It is used to set or get the anchor part of the URL.
      host
      It is used to set or get the hostname or port number of the URL.
      hostname
      It is used to set the hostname.
      href
      It is used to set or get the URL of the current window.
      origin
      It returns the protocol, domain, and port of the URL.
      pathname
      To update or get the path name.
      port
      To update or get the port of the URL.
      protocol
      To update or get the protocol.
      search
      To set or get the query string of the URL.

      Location Object Methods List

      Here, we have listed all methods of the Location object.
      Method
      Description
      assign()
      To load resources at a particular URL.
      reload()
      To reload the web page.
      replace()
      To replace the resources of the current webpage with another webpage's resources.
      toString()
      Returns the URL in the string format.