在 HTML 中，链接通常使用 a 标签来实现。而每一个 a 标签都可以包含一个或多个锚点，用来标记页面中的特定位置，以实现跳转到该位置的功能。
但是，在一些情况下，我们需要获取某个锚点对应的 href 值，以便进行其他操作。本文将介绍如何通过 JavaScript 获取 a 标签中锚点的 href 值。
获取 href 属性值
在 HTML 中，a 标签的 href 属性用于指定链接的目标 URL。因此，我们可以通过读取该属性来获取锚点的 href 值。
以下是一段示例代码：
<a href="#top">返回顶部</a>
在这个示例中，我们定义了一个带有 #top 锚点的 a 标签。当用户点击该链接时，页面会跳转到 id 为 top 的元素处。
要获取该锚点的 href 值，我们可以使用 JavaScript 中的 getAttribute() 方法。例如：
const link = document.querySelector('a');
const hrefValue = link.getAttribute('href');
console.log(hrefValue); // #top在上面的代码中，我们首先使用 querySelector() 方法找到页面中的第一个 a 标签，然后使用 getAttribute() 方法获取其 href 属性值。
获取锚点名称
在获取 href 值后，我们需要从中提取出锚点的名称。一般来说，锚点名称以 # 字符开头，后面跟着标识符或字符串。
以下是一个示例：
const hrefValue = link.getAttribute('href'); // #top
const anchorName = hrefValue.substring(1); // top
console.log(anchorName);在这个示例中，我们首先使用 getAttribute() 方法获取 a 标签的 href 值，然后使用 JavaScript 的 substring() 方法从该值中提取出锚点名称。
代码总结
综上所述，要从锚点中获取 href 值和锚点名称，可以按照以下步骤进行：
- 使用
querySelector()方法找到a标签。 - 使用
getAttribute()方法获取a标签的href属性值。 - 使用
substring()方法从href值中提取出锚点名称。
const link = document.querySelector('a');
const hrefValue = link.getAttribute('href');
const anchorName = hrefValue.substring(1);
console.log(hrefValue); // #top
console.log(anchorName); // top以上代码可以帮助您在 JavaScript 中实现从锚点获取 href 值的功能，可用于实现页面内跳转、滚动到特定位置等操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14951