---
title: Location
slug: Web/API/Location
tags:
  - API
  - HTML DOM
  - Interface
  - Location
  - Referencia
translation_of: Web/API/Location
---
<p>{{APIRef("HTML DOM")}}</p>

<p>La interface <strong><code>Location</code></strong> representa la ubicación (URL) del objeto al que esta vinculado. Los cambios hechos en ella son reflejados en el objeto al cual está relacionado. Ambas interfaces, {{domxref("Document")}} y {{domxref("Window")}} tienen una interface <code>Location</code> asignada, accessible desde {{domxref("Document.location")}} y {{domxref("Window.location")}} respectivamente.</p>

<h2 id="Propiedades">Propiedades</h2>

<p><em>La interface <code>Location</code></em><em> no hereda ninguna propiedad, pero las implementa desde {{domxref("URLUtils")}}.</em></p>

<dl>
 <dt>{{domxref("Location.href")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene la URL completa. Si es cambiada, el documento asociado navegará a la nueva pagina. Puede ser cambiada desde un origen diferente que el asociado al documento.</dd>
 <dt>{{domxref("Location.protocol")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene el esquema del protocolo de la URL, incluyendo el <code>':'</code> final.</dd>
 <dt>{{domxref("Location.host")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene el host, el cual esta compuesta por: <em>hostname</em>,  <code>':'</code>, y el <em>port</em> de la URL.</dd>
 <dt>{{domxref("Location.hostname")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene el dominio de la URL.</dd>
 <dt>{{domxref("Location.port")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene el numero del puerto de la URL.</dd>
 <dt>{{domxref("Location.pathname")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene el <code>'/'</code> inicial, seguido por la ruta de la URL.</dd>
 <dt>{{domxref("Location.search")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene un <code>'?'</code> seguido por los parametros o el "querystring" de la URL. Navegadores modernos proveen <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> y <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> para hacer mas facil de obtener los parametros desde el querystring.</dd>
 <dt>{{domxref("Location.hash")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene un <code>'#'</code> seguido por el fragmento identificador de la URL.</dd>
 <dt>{{domxref("Location.username")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene el <em>username</em> (usuario) especificado antes del dominio.</dd>
 <dt>{{domxref("Location.password")}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene el <em>password</em> (contraseña) especificado antes del dominio.</dd>
 <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
 <dd>Es un {{domxref("DOMString")}} que contiene la forma canonica del <em>origin</em> (origen) de la URL.</dd>
</dl>

<h2 id="Metodos">Metodos</h2>

<p><em>La interface <code>Location</code></em><em> no hereda ningun metodo<em>, pero los implementa desde {{domxref("URLUtils")}}</em>.</em></p>

<dl>
 <dt>{{domxref("Location.assign()")}}</dt>
 <dd>Carga el recurso en la URL proporcionada en el parámetro.</dd>
 <dt>{{domxref("Location.reload()")}}</dt>
 <dd>Recarga el recurso desde la URL actual. Si unico y opcional parametro es {{domxref("Boolean")}}, el cual, cuando es <code>true</code>, hace que la pagina siempre sea recargada desde el servidor. Si es <code>false</code> o no es especificado, el navegador puede recargar la pagina desde su cache.</dd>
 <dt>{{domxref("Location.replace()")}}</dt>
 <dd>Reemplaza el recurso actual por el recibido como URL. La diferencia con el metodo <code>assign()</code> es que luego de usar <code>replace()</code> la pagina actual no va a ser guardada en la sesión {{domxref("History")}}, esto significa que el usuario no podrá usar el boton <em>Atras</em> para navegar a esta.</dd>
 <dt>{{domxref("Location.toString()")}}</dt>
 <dd>Retorna un {{domxref("DOMString")}} que contiene la URL completa. Es un sinonimo de {{domxref("URLUtils.href")}}, aunque este no puede ser utilizado para modificar el valor.</dd>
</dl>

<h2 id="Ejemplo">Ejemplo</h2>

<pre class="brush: js">// Crear un elemento &lt;a&gt; y usar la propiedad href para el proposito de este ejemplo.
// Una alternativa mas correcta es navegar a la URL y usar document.location o window.location
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org:8080
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // 8080
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificacion</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Definicion inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

{{Compat("api.Location")}}

<h2 id="Vea_también">Vea también</h2>

<ul>
 <li>Dos metodos que crean tal objeto: {{domxref("Window.location")}} y {{domxref("Document.location")}}.</li>
 <li>URL relacionadas a interfaces: {{domxref("URL")}}, {{domxref("URLSearchParams")}} y {{domxref("HTMLHyperlinkElementUtils")}}</li>
</ul>