本文介绍如何使用原生javascript准确获取嵌套在``标签内（如``中）的链接文本，解决jquery未加载导致`$ is not defined`的问题，并提供兼容性好、语义清晰的实现方案。
在实际开发中，尤其是维护遗留项目时，常遇到类似如下结构的HTML：
<a href="https://www.php.cn/link/06bf4edc41659b46508b28289f9f795b" onclick="loadContent('https://https://www.php.cn/link/06bf4edc41659b46508b28289f9f795b.com');">
<span class="navitem">Click Link</span>
</a>目标是在用户点击该链接时，可靠地提取“Click Link”这一可见文本。你可能尝试过jQuery写法（如$('.navitem').on(...)或已废弃的.live()），但因项目未引入jQuery库而报错$ is not defined——这正是问题的关键：不能依赖未加载的第三方库。
✅ 推荐使用现代、轻量、无需依赖的原生JavaScript方案：
document.querySelector('a').addEventListener('click', function(event) {
// 阻止默认跳转（可选，根据业务需要）
event.preventDefault();
// 安全获取内部 span 的纯文本（textContent 比 innerText 更可靠，不触发重排）
const linkText = this.querySelector('span')?.textContent?.trim() || '';
console.log('点击的链接文本为：', linkText); // 输出：Click Link
// 此处可调用你的 loadContent 函数
if (linkText) {
loadContent('https://https://www.php.cn/link/06bf4edc41659b46508b28289f9f795b.com'); // 注意：原 onclick 中的参数需明确传入
}
});? 关键说明与最佳实践：
立即学习“Java免费学习笔记（深入）”；
-
document.querySelector('a') 仅匹配第一个 <a> 元素；若页面含多个同类链接，请改用 document.querySelectorAll('a') 并遍历绑定：
document.querySelectorAll('a').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const text = this.querySelector('span')?.textContent?.trim(); console.log(text); }); }); 使用可选链操作符 ?. 和空值合并 || '' 提升健壮性，避免因DOM结构变动导致脚本崩溃；
textContent 优于 innerText：它返回所有文本节点内容（包括隐藏元素），且性能更高、无浏览器渲染依赖；
始终调用 event.preventDefault() 显式阻止默认跳转行为，防止页面意外跳转干扰逻辑；
若需兼容IE11，需替换 ?. 为传统判断（如 this.querySelector('span') && this.querySelector('span').textContent）。
? 总结：抛弃对jQuery的隐式依赖，采用语义清晰、容错性强的原生DOM API，不仅能精准捕获嵌套文本，还能提升代码可维护性与加载性能。
