HTML | DOM 锚相关属性

锚（Anchor）是 HTML 中的一种标签，用来创建链接跳转或定位标签等功能。在 HTML DOM 中，可以通过访问锚（Anchor）元素的相关属性来动态地修改锚点的行为或样式。

HTML 锚标签

HTML 中的锚标签（Anchor tag）使用“”标签来定义，可以包含以下属性：

• href：链接的地址，可以是一个URL，一个文件名或一个锚点等。
• target：链接打开页面的方式，可以是当前页打开，新窗口打开等。
• id：为页面元素定义唯一的标识符，用于在页面间跳转时锚点定位使用。

<a href="https://www.example.com" target="_blank" id="section1">Example</a>

DOM 锚属性

HTML DOM 中的锚元素（Anchor element）对应着一个 HTML 元素节点对象，我们可以通过访问该节点对象的属性来获取或修改锚点的相关信息。以下是常用的 DOM 锚属性：

• hash：返回链接中的锚点名称。
• hostname：返回链接对应的域名。
• pathname：返回链接对应的文件路径和名称。
• search：返回链接中的查询字符串。

<a href="#section1">Go to Section 1</a>

<script>
    var anchor = document.getElementsByTagName("a")[0];
    console.log(anchor.hash); // "#section1"
    console.log(anchor.hostname); // "www.example.com"
    console.log(anchor.pathname); // "/"
    console.log(anchor.search); // ""
</script>

更改锚点的位置

在单页应用的开发中，我们经常需要动态地修改浏览器 URL 中的锚点位置来改变页面视图的显示。在 HTML DOM 中，可以通过以下两种方式来实现：

location.hash 属性

location 对象是 BOM（Browser Object Model）中的一个对象，它代表着当前浏览器中打开的窗口或标签页。其中的 hash 属性可以获取或修改当前 URL 中的锚点位置。

<button onclick="location.hash='#section1'">Go to Section 1</button>

history.replaceState() 方法

history 对象是 BOM（Browser Object Model）中的一个对象，它提供了对浏览器历史记录的访问和修改。其中的 replaceState() 方法可以修改当前浏览器的 URL，但不会向服务器发送请求。

<button onclick="history.replaceState(null, null, '#section1')">Go to Section 1</button>

总结

通过 HTML 和 DOM 提供的锚相关属性，我们可以快速地实现页面内部和跨页面的链接跳转、锚点定位等常见功能。在单页应用的开发中，更改URL的锚点位置是非常重要的，可以实现浏览器历史记录的控制和视图的切换等功能。