参考资料

1. HTML DOM 返回一个button的name 实例
2. HTML DOM删除表格中的行
3. HTML DOM 返回图像映射的某个区域的shape 实例
4. HTML DOM 事件
5. HTML DOM 对iframe排版
6. HTML DOM 改变iframe的高度和宽度
7. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
8. HTML DOM 返回文档的最后一次修改时间 实例

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元素会应用上述样式。