如何通过浏览器控制台程序化选中Google相册中的照片？

尝试通过浏览器控制台程序化选中Google相册里的某张照片，编写了如下代码：

const photo = document.getElementsByClassName('p137Zd')[0].parentElement

photo.querySelectorAll('div[role="checkbox"]').click()

运行时触发错误，报错信息如下：

Uncaught TypeError: photo.parentElement.querySelectorAll(...)[0].click is not a function

错误原因分析 #

1. querySelectorAll()返回的是NodeList元素集合，不是单个DOM元素，直接对集合调用click()会触发类型错误，必须先获取集合内的具体元素。
2. 报错信息中出现photo.parentElement，但原代码里photo已经是p137Zd元素的父元素，多余的层级调用会导致定位不到正确元素。

修正后的代码示例 #

基础修正版

直接修复原代码的核心问题，定位到正确的复选框元素后调用click()：

const photoContainer = document.getElementsByClassName('p137Zd')[0].parentElement;
const targetCheckbox = photoContainer.querySelectorAll('div[role="checkbox"]')[0];
// 先判断元素是否存在，避免空值报错
if (targetCheckbox) {
  targetCheckbox.click();
}

简化版

用querySelector直接获取单个匹配元素，代码更简洁：

const firstCheckbox = document.querySelector('.p137Zd').parentElement.querySelector('div[role="checkbox"]');
if (firstCheckbox) {
  firstCheckbox.click();
}

兼容版（应对click()不生效情况）

如果页面有事件拦截导致click()方法无效，可尝试触发原生鼠标点击事件：

const firstCheckbox = document.querySelector('.p137Zd').parentElement.querySelector('div[role="checkbox"]');
if (firstCheckbox) {
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  firstCheckbox.dispatchEvent(clickEvent);
}

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