HTML | DOM 输入 URL 对象

在 HTML 和 DOM 中，可以使用 URL 对象表示一个 URL。URL 对象包含了 URL 的各种组成部分，如协议、主机名、文件路径等，方便程序员进行 URL 相关操作。

创建 URL 对象

要创建 URL 对象，可以使用 URL 构造器（constructor）：

var urlObj = new URL(urlString, baseURL);

其中，urlString 是表示 URL 的字符串，baseURL 是可选参数，表示相对 URL 的基本 URL。例如：

var url = 'https://www.example.com/index.html?query=html#fragment';
var baseURL = 'https://www.example.com/subdir/';
var urlObj = new URL(url, baseURL);

这里创建了一个 URL 对象 urlObj，表示的 URL 是 'https://www.example.com/index.html?query=html#fragment'，但是相对于 baseURL，它的路径应该是 '../index.html'。

URL 对象的属性

URL 对象有很多属性，用来获取 URL 的各个组成部分。以下是一些常用的属性：

• href：完整的 URL 字符串，包括协议、主机名、路径、查询字符串和片段标识符。
• protocol：协议（'http' 或 https'）。
• host：主机名和端口号。
• hostname：主机名，不包括端口号。
• port：端口号。
• pathname：路径。
• search：查询字符串，包括问号。
• hash：片段标识符，包括井号。

可以通过这些属性获取 URL 的各部分，例如：

console.log(urlObj.href); // 'https://www.example.com/index.html?query=html#fragment'
console.log(urlObj.protocol); // 'https:'
console.log(urlObj.host); // 'www.example.com'
console.log(urlObj.pathname); // '/index.html'
console.log(urlObj.search); // '?query=html'
console.log(urlObj.hash); // '#fragment'

URL 对象的方法

URL 对象还有一些方法，用来修改 URL 的各个部分。以下是一些常用的方法：

• searchParams.get(name)：获取查询参数的值。
• searchParams.set(name, value)：设置查询参数的值。
• searchParams.append(name, value)：添加查询参数。
• searchParams.delete(name)：删除查询参数。

例如：

console.log(urlObj.searchParams.get('query')); // 'html'
urlObj.searchParams.set('query', 'dom');
console.log(urlObj.href); // 'https://www.example.com/index.html?query=dom#fragment'

总结

URL 对象是 HTML 和 DOM 中一个非常实用的对象，它能够方便地获取和操作 URL 的各个组成部分，帮助程序员更加高效地编写 URL 相关的代码。