如何从类名含冒号的多个相同class div中获取内部文本内容

问题原因 #

• getElementById() 仅支持匹配带有指定id属性的DOM元素，你当前的div、a标签均未设置id属性，因此调用会返回null
• :eq() 是jQuery专属的选择器语法，无法直接在原生JavaScript的DOM选择方法中使用

实现方案 #

原生JavaScript实现 #

无需引入额外依赖，推荐使用querySelectorAll批量匹配元素：

// 匹配所有class为website的div下的a标签
const aElements = document.querySelectorAll('div.website a');
// 提取文本并去除首尾空格
const textA = aElements[0].textContent.trim(); // 输出 "A"
const text1 = aElements[1].textContent.trim(); // 输出 "1"

如果需要单独获取某一个元素，也可以直接用querySelector配合伪类选择：

// 获取第一个div下的a标签文本
const textA = document.querySelector('div.website:nth-of-type(1) a').textContent.trim();
// 获取第二个div下的a标签文本
const text1 = document.querySelector('div.website:nth-of-type(2) a').textContent.trim();

jQuery实现 #

如果项目已引入jQuery，可以直接使用你之前尝试的:eq()语法实现筛选：

const textA = $('div.website a:eq(0)').text().trim(); // 输出 "A"
const text1 = $('div.website a:eq(1)').text().trim(); // 输出 "1"

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