HTML | DOM 区域主机名属性

简介

区域主机名属性（hostname）是 DOM 元素的一个属性，用于存储和访问 URL 中主机名部分的字符串。即，如果 URL 为 https://www.example.com/path，则 hostname 属性的值为 www.example.com。该属性可以用于在 JavaScript 中获取或设置当前 URL 的主机名部分。

属性值

hostname 属性值是一个字符串，表示 URL 中的主机名部分。如果没有指定主机名，则该值为空字符串。

const url = new URL('https://www.example.com/path');
console.log(url.hostname); // 'www.example.com'

区域主机名和端口

如果 URL 中指定了端口号，则 hostname 属性的值将包含端口号。例如，对于 https://www.example.com:8080/path，hostname 的值将为 www.example.com:8080。

使用区域主机名属性

区域主机名属性通常用于获取当前页面 URL 的主机名，例如用于跟踪分析或在服务器端处理请求。也可能会将其用于在页面上生成链接，自动填充表单等。

以下示例使用 hostname 属性获取 URL 中的主机名部分并在页面上显示出来：

<p>The hostname of this page is: <span id="hostname"></span></p>

<script>
  const url = new URL(window.location.href);
  const hostnameSpan = document.getElementById('hostname');
  hostnameSpan.textContent = url.hostname;
</script>

在这个示例中，JavaScript 代码使用 new URL() 构造函数创建了一个 URL 对象，然后从该对象的 hostname 属性中获取主机名部分，并将其设置为页面中 <span> 元素的文本内容。

总结

区域主机名属性是用于访问 URL 中主机名部分的 DOM 属性，可用于获取或设置当前页面的主机名信息。它对于许多 Web 开发任务都是非常有用的，例如浏览器扩展、跟踪分析、自动表单填充等。