如何在无唯一ID时使用JavaScript/JQuery获取元素值？

没问题！当页面元素没有唯一ID可以依赖时，我们完全可以借助类名、DOM层级关系、属性特征这些方式来精准定位元素，进而获取它的值。结合你给出的代码片段，我整理了几种实用的实现方法：

JQuery 实现方案 #

1. 通过类名直接获取 #

如果目标元素有唯一的类（比如你代码里的.lead段落），直接用类选择器就能快速定位：

// 获取.lead元素的文本内容
var leadText = $('.lead').text();

// 若页面存在多个同类别元素，可用eq()指定索引（从0开始）
var firstLeadText = $('.lead').eq(0).text();

2. 通过层级关系缩小范围 #

如果类名不唯一，可以借助父元素的类来限定查找范围，避免选到无关元素：

// 先找到外层的.col-sm-6容器，再找内部的.lead元素
var targetText = $('.col-sm-6 .lead').text();

3. 通过属性特征定位 #

如果元素有独特的属性（比如你代码里的a标签href包含REGISTRATION），可以用属性选择器：

// 获取该a标签的文本内容
var regLinkText = $('a[href*="REGISTRATION"]').text();
// 获取该a标签的href属性值
var regLinkHref = $('a[href*="REGISTRATION"]').attr('href');

原生JavaScript 实现方案 #

如果你不想依赖JQuery，原生JS的querySelector/querySelectorAll也能实现同样的效果，语法和JQuery选择器基本一致：

1. 类名定位 #

// 获取第一个匹配的.lead元素
var leadElement = document.querySelector('.lead');
var leadText = leadElement.textContent;

// 获取所有.lead元素，遍历处理
var leadElements = document.querySelectorAll('.lead');
leadElements.forEach(element => {
  console.log(element.textContent);
});

2. 层级组合定位 #

// 精准定位.col-sm-6容器下的.lead元素
var targetElement = document.querySelector('.col-sm-6 .lead');
var targetText = targetElement.textContent;

3. 属性特征定位 #

// 找到href包含REGISTRATION的a标签
var regLink = document.querySelector('a[href*="REGISTRATION"]');
var regLinkText = regLink.textContent;

小提示 #

• 优先使用类选择器，比依赖样式属性或复杂DOM层级更稳定；
• 当页面有多个同类别元素时，一定要通过父容器缩小查找范围，避免选中错误元素；
• 原生JS的querySelector系列方法兼容性很好，现代浏览器都支持。

内容的提问来源于stack exchange，提问作者user5443928