参考资料

1. HTML DOM 改变image的src
2. HTML DOM禁用和启用下拉列表
3. HTML DOM 返回一个button的name 实例
4. HTML DOM一个单元格的innerHTML
5. HTML DOM shift键被按下了吗？
6. HTML DOM 返回一个表单acceptCharset属性的值
7. HTML DOM改变表格边框的宽度
8. HTML DOM 返回一个锚的名字 实例

HTML DOM 返回一个区域的href属性的锚部分实例

HTML DOM 返回区域的href属性锚部分

详细介绍

HTML DOM中的hash属性可以返回或设置URL中的锚部分（即#号后面的部分）。当URL中包含锚点时，可以通过这个属性获取或修改它。

相关标签

主要与<a>标签相关，但也可用于任何具有href属性的元素如<area>。

用法

// 获取当前URL的锚部分
var currentHash = window.location.hash;

// 设置新的锚部分
window.location.hash = 'newSection';

实例

<a id="myLink" href="page.html#section1">跳转到第一节</a>

<script>
  // 获取锚部分
  var link = document.getElementById('myLink');
  console.log(link.hash); // 输出: #section1
  
  // 修改锚部分
  link.hash = 'section2';
  console.log(link.href); // 输出: page.html#section2
</script>

功能

1. 获取URL中的锚点标识

2. 动态修改页面锚点

3. 实现单页面应用(SPA)的路由功能

4. 滚动到页面特定位置

CSS扩展

可以通过CSS伪类:target来样式化被锚点定位的元素：

/* 当元素被锚点定位时的样式 */
:target {
  background-color: yellow;
  border: 2px solid red;
}

<div id="section1">
  <h2>第一节</h2>
  <p>这是第一节内容...</p>
</div>

当访问page.html#section1时，#section1元素会应用上述样式。