参考资料

1. HTML DOM 返回和设置链接的charset属性实例
2. HTML DOM 返回一个锚的名字 实例
3. HTML DOM 设置image的hspace和vspace属性
4. HTML DOM 返回图像映射某个区域的替代文字实例
5. HTML DOM 返回图像映射的某个区域的href 实例
6. HTML DOM 返回文档中第一个锚的 innerHTML
7. HTML DOM 访问
8. HTML DOM 返回一个iframe中的name属性的值

HTML DOM 获取区域href属性的querystring部分

详细介绍

HTML DOM 提供了获取<a>标签href属性中查询字符串(query string)部分的方法。查询字符串是URL中问号(?)后面的部分，包含键值对参数。

相关标签

主要涉及<a>标签：

<a id="myLink" href="https://example.com/page?name=John&age=30">示例链接</a>

用法

可以通过JavaScript获取和操作querystring：

// 获取a标签元素
const link = document.getElementById("myLink");

// 获取完整的href
const fullHref = link.href;

// 获取querystring部分
const queryString = link.search;

// 或者从href中提取
const queryFromHref = link.href.split('?')[1];

实例

<a id="testLink" href="https://example.com/search?q=javascript&sort=desc">测试链接</a>

<script>
  const link = document.getElementById("testLink");
  console.log(link.search); // 输出: "?q=javascript&sort=desc"
  
  // 解析为对象
  const params = new URLSearchParams(link.search);
  console.log(params.get("q")); // 输出: "javascript"
  console.log(params.get("sort")); // 输出: "desc"
</script>

功能

• 获取完整的查询字符串

• 解析查询字符串中的各个参数

• 修改或添加新的查询参数

• 重新构建URL

CSS扩展

虽然CSS不能直接操作querystring，但可以根据href属性设置样式：

/* 为包含特定查询参数的链接设置样式 */
a[href*="?id="] {
  color: red;
}

/* 为href以查询字符串开头的链接设置样式 */
a[href^="?"] {
  font-weight: bold;
}

注意：CSS只能基于字符串匹配来设置样式，无法像JavaScript那样解析查询参数。