如何用原生JavaScript组合两个querySelectorAll结果获取完整作者姓名

问题根因 #

你现有代码仅返回第一个作者姓名的原因是：#author-group是页面内唯一ID节点，document.querySelectorAll('#author-group')只会得到长度为1的数组，遍历一次仅能取到第一个存在的名、姓节点内容。

解决方案 #

方案1：直接配对已获取的名、姓数组 #

你已经可以分别拿到长度一致的名、姓数组，直接按索引拼接即可：

// 提取名数组
const givenNames = Array.from(document.querySelectorAll('span.text.given-name')).map(s => s.outerText.trim());
// 提取姓数组
const surnames = Array.from(document.querySelectorAll('span.text.surname')).map(s => s.outerText.trim());
// 按索引配对拼接为完整姓名字符串
const fullNames = givenNames.map((given, idx) => `${given} ${surnames[idx]}`).join(', ');

console.log(fullNames);
// 输出：Adrien Petitpas, Julien M. Jaquet, Pascal Sciarini

方案2：遍历作者容器节点（更稳妥） #

更推荐该写法，直接选中每个作者的独立容器节点，再提取对应节点下的名、姓，可避免名、姓数组长度不一致导致的错位问题：

const fullNames = Array.from(document.querySelectorAll('#author-group a.author'))
  .map(authorEl => {
    const given = authorEl.querySelector('span.text.given-name')?.outerText.trim() || '';
    const surname = authorEl.querySelector('span.text.surname')?.outerText.trim() || '';
    return `${given} ${surname}`;
  })
  .filter(Boolean) // 过滤无效空值
  .join(', ');

console.log(fullNames);

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