HTML | DOM URL 属性

HTML | DOM URL 属性是用于获取或设置某个 URL 的属性。在 HTML 中，URL 属性被用于指定链接的目标或媒体文件的来源等。

HTML URL 属性

HTML 的 URL 属性用于指定链接或媒体文件的来源，其中包括以下属性：

href 属性

href 属性用于指定链接的目标 URL。

<a href="https://www.example.com">点击访问示例网站</a>

src 属性

src 属性用于指定嵌入式媒体文件（如图像、音频、视频等）的 URL。

<img src="https://www.example.com/image.jpg" alt="示例图像">

action 属性

action 属性用于指定表单提交后的目标 URL。

<form action="https://www.example.com/form-action" method="post">
  <input type="text" name="user-name" placeholder="请输入用户名">
  <input type="submit" value="提交">
</form>

data 属性

data 属性用于指定 iframe 中的文档 URL。

<iframe src="https://www.example.com" data-src="https://www.example.com/document.html"></iframe>

JavaScript DOM URL 属性

在 JavaScript 中，可以通过访问 DOM 元素的 URL 属性来获取或设置其 URL。“DOM” 是指文档对象模型，它是 HTML 文档的编程接口，用于访问和操作 HTML 文档的元素。

location.href 属性

location.href 属性用于获取或设置当前页面的 URL。

console.log("当前页面的 URL 为：" + location.href);

if (location.href === "https://www.example.com/login") {
  // 转到另一个页面
  location.href = "https://www.example.com/home";
}

href 属性

href 属性用于访问指定元素（如链接或区域）的 URL。

var link = document.querySelector("a");
console.log("此链接的 URL 为：" + link.href);

src 属性

src 属性用于访问指定元素（如图像或 iframe）的 URL。

var img = document.querySelector("img");
console.log("此图像的 URL 为：" + img.src);

var iframe = document.querySelector("iframe");
console.log("此 iframe 的文档 URL 为：" + iframe.contentWindow.location.href);

origin 属性

origin 属性用于获取当前页面的源 URL，也就是协议、主机和端口号的组合体。

console.log("当前页面的源 URL 为：" + location.origin);

search 属性

search 属性用于获取或设置当前 URL 中的查询部分（问号（?）之后的部分）。

console.log("当前 URL 的查询部分为：" + location.search);

hash 属性

hash 属性用于获取或设置当前 URL 中的哈希部分（井号（#）之后的部分）。

console.log("当前 URL 的哈希部分为：" + location.hash);

assign() 方法

assign() 方法用于载入（加载）一个新的文档（URL）。

location.assign("https://www.example.com/other-page");

reload() 方法

reload() 方法用于重新载入当前文档。

location.reload();

总结

HTML | DOM URL 属性是用于获取或设置指定 URL 的属性，可以在 HTML 中使用相应的属性，也可以在 JavaScript 中通过访问 DOM 元素的 URL 属性来进行相应操作。常用的 URL 属性包括 href、src、action、data 等。通过使用这些属性和方法，我们可以更加方便地对页面进行操作和导航。