爬取ScienceDirect页面作者信息仅返回首个结果的问题求助

嗨，我来帮你排查这个问题～

你遇到的核心问题是链式调用querySelector的逻辑缺陷，以及对querySelector和querySelectorAll的使用场景理解有偏差，具体来说：

问题分析 #

1. querySelector的局限性：它只会返回匹配到的第一个元素，所以你的链式map操作从第一步开始就只拿到了第一个作者对应的节点，后续自然只能提取到第一个作者的名字。
2. querySelectorAll报错的原因：当你把某个querySelector换成querySelectorAll时，前面的map返回的是单个DOM元素（甚至可能是null），而querySelectorAll是DOM节点列表的专属方法，单个元素上没有这个方法，所以会提示“不是函数”。
3. 潜在的空值风险：如果链式调用中某一步找不到元素，会返回null，后续再调用querySelector直接就会抛出错误。

针对目标页面的修正代码 #

我查看了你提供的ScienceDirect文章页面结构，调整了选择器逻辑，直接定位到每个作者的容器节点，然后批量提取姓名：

Array.from(document.querySelectorAll('#author-group .author'))
  .map(authorNode => {
    // 用可选链避免找不到元素时的报错，同时去除多余空格
    const givenName = authorNode.querySelector('.given-name')?.textContent.trim() || '';
    const surname = authorNode.querySelector('.text.surname')?.textContent.trim() || '';
    return `${givenName} ${surname}`.trim();
  })
  .filter(name => name.length > 0) // 过滤掉可能的空条目
  .join(', ')

代码说明 #

• 精准定位作者容器：#author-group .author直接选中页面中所有作者的独立容器节点，确保一开始就拿到完整的作者列表。
• 可选链处理空值：?.操作符会在元素不存在时返回undefined，配合|| ''避免后续拼接出错。
• 清理冗余空格：trim()去除姓名前后的多余空格，保证输出格式整洁。
• 过滤无效条目：filter步骤去掉可能的空字符串，避免最终结果出现多余的逗号。

为什么之前的代码行不通？ #

你之前的选择器路径是从“作者主页按钮”开始层层嵌套，但querySelector只会拿到第一个按钮，后续的所有操作都只针对第一个作者的节点，自然无法提取其他作者的信息。直接定位到作者容器节点是更高效可靠的方式～

备注：内容来源于stack exchange，提问作者menteith