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

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那样解析查询参数。