---
title: URL API
slug: Web/API/URL_API
translation_of: Web/API/URL_API
---
<p>{{DefaultAPISidebar("URL API")}}</p>

<p><span class="seoSummary">The URL API is a component of the URL standard, which defines what constitutes a valid {{Glossary("URL", "Uniform Resource Locator")}} and the API that accesses and manipulates URLs.</span> The URL standard also defines concepts such as domains, hosts, and IP addresses, and also attempts to describe in a standard way the legacy <code>application/x-www-form-urlencoded</code> {{Glossary("MIME type")}} used to submit web forms' contents as a set of key/value pairs.</p>

<h2 id="Mô_hình_URL_và_cách_sử_dụng">Mô hình URL và cách sử dụng</h2>

<p><span class="tlid-translation translation" lang="vi"><span title="">Phần lớn tiêu chuẩn URL được lấy theo <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL">định nghĩa của URL</a> cùng cấu trúc và phân tích cú pháp.</span> <span title="">Nó cũng bao gồm các định nghĩa về các thuật ngữ khác nhau liên quan đến việc đánh địa chỉ các máy tính trên mạng, các thuật toán để phân tích địa chỉ IP và địa chỉ DOM được chỉ định.</span></span></p>

<h3 id="Truy_cập_component_URL">Truy cập component URL</h3>

<p>Tạo object {{domxref("URL")}} <span class="tlid-translation translation" lang="vi"><span title="">đối với một URL đã cho sẽ phân tích cú pháp URL và cung cấp quyền truy cập nhanh vào các thành phần của nó.</span></span></p>

<pre class="brush: js notranslate">let addr = new URL("https://wiki.developer.mozilla.org/vi/docs/Web/API/URL_API");
let host = addr.host;
let path = addr.pathname;
</pre>

<p>Mã trên tạo ra 1 object <code>URL</code> cho bài viết bạn đang đọc, rồi lấy thuộc tính {{domxref("URL.host", "host")}} và {{domxref("URL.pathname", "pathname")}}. Trong tình huống trên, các giá trị tương ứng lần lượt là <code>wiki.developer.mozilla.org</code> và <code>/vi/docs/Web/API/URL_API</code>.</p>

<h3 id="Thay_đổi_URL">Thay đổi URL</h3>

<p><span class="tlid-translation translation" lang="vi"><span title="">Hầu hết các thuộc tính của URL là cố định;</span> <span title="">bạn có thể viết các giá trị mới cho chúng để thay đổi URL.</span> <span title="">Ví dụ: để tạo URL mới và đặt tên người dùng:</span></span></p>

<pre class="brush: js notranslate">let myUsername = "someguy";
let addr = new URL("https://mysite.com/login");
addr.username = myUsername;
</pre>

<p>Đặt giá trị của {{domxref("URL.username", "username")}} không chỉ thay đổi giá trị của thuộc tính, mà còn thay đổi cả đường dẫn URL. Sau khi thực thi đoạn code, giá trị trả về của {{domxref("URL.href", "addr.href")}} là <code>https://someguy@mysite.com/login</code>. Điều này đúng với mọi thuộc tính có thể ghi.</p>

<h3 id="Truy_vấn">Truy vấn</h3>

<p>Thuộc tính {{domxref("URL.search", "search")}} trong <code>URL</code> chứa các giá trị truy vấn của URL. Lấy ví dụ, nếu đường dẫn URL là <code>https://mysite.com/login?user=someguy&amp;page=news</code>, thì giá trị của thuộc tính <code>search</code> là <code>?user=someguy&amp;page=news</code>. Bạn có thể kiểm tra các giá trị của mỗi tham số với {{domxref("URLSearchParams")}} là object của phương thức {{domxref("URLSearchParams.get", "get()")}}:</p>

<pre class="brush: js notranslate">let addr = new URL("https://mysite.com/login?user=someguy&amp;page=news");
try {
  loginUser(addr.searchParams.get("user"));
  gotoPage(addr.searchParams.get("page"));
} catch(err) {
  showErrorMessage(err);
}
</pre>

<p>Với ví dụ trên, username và trang đích được lấy từ query và chuyển vào trong function được dùng để điều hướng người dùng đăng nhập và chuyển tới trang đích mong muốn.</p>

<p>Other functions within <code>URLSearchParams</code> let you change the value of keys, add and delete keys and their values, and even sort the list of parameters.</p>

<h2 id="URL_API_interfaces">URL API interfaces</h2>

<p>The URL API is a simple one, with only a couple of interfaces to its name:</p>

<div class="index">
<ul>
 <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/URL"><code>URL</code></a></span></span></li>
 <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/URLSearchParams"><code>URLSearchParams</code></a></span></span></li>
</ul>
</div>

<p>Older versions of the specification included an interface called {{domxref("URLUtilsReadOnly")}}, which has since been merged into the {{domxref("WorkerLocation")}} interface.</p>

<h2 id="Ví_dụ">Ví dụ</h2>

<p>If you want to process the parameters included in a URL, you could do it manually, but it's much easier to create a <code>URL</code> object to do it for you. The <code>fillTableWithParameters()</code> function below takes as input a {{domxref("HTMLTableElement")}} object representing a {{HTMLElement("table")}}. Rows are added to the table, one for each key found in the parameters, with the first column containing the key's name, and the second column having the value.</p>

<p>Note the call to {{domxref("URLSearchParams.sort()")}} to sort the parameter list before generating the table.</p>

<pre class="brush: js notranslate">function fillTableWithParameters(tbl) {
  let url = new URL(document.location.href);
  url.searchParams.sort();
  let keys = url.searchParams.keys();

  for (let key of keys) {
    let val = url.searchParams.get(key);
    let row = document.createElement("tr");
    let cell = document.createElement("td");
    cell.innerText = key;
    row.appendChild(cell);
    cell = document.createElement("td");
    cell.innerText = val;
    row.appendChild(cell);
    tbl.appendChild(row);
  };
}</pre>

<p>A working version of this example can be <a href="https://url-api.glitch.me">found on Glitch</a>. Just add parameters to the URL when loading the page to see them in the table. For instance, try <code><a href="https://url-api.glitch.me?from=mdn&amp;excitement=high&amp;likelihood=inconceivable">https://url-api.glitch.me?from=mdn&amp;excitement=high&amp;likelihood=inconceivable</a></code>.</p>

<h2 id="Quy_chuẩn">Quy chuẩn</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('URL')}}</td>
   <td>{{Spec2('URL')}}</td>
   <td>WHATWG specification</td>
  </tr>
 </tbody>
</table>

<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2>

<div>


<p>{{Compat("api.URL")}}</p>
</div>

<h2 id="Xem_thêm">Xem thêm</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
 <li>CSS {{cssxref("&lt;url&gt;")}} type</li>
</ul>