如何用Greasemonkey脚本移除无ID/Class的DIV内的无ID/Class图片

嘿，我完全懂你这种抓瞎的感觉——碰到连个id、class都没有的元素，常规的定位方法直接失效！不过咱们可以靠DOM结构、元素特征或者更灵活的选择器来搞定，下面给你几个实用的实现思路：

方法1：利用上下文元素定位目标DIV #

如果这个无标识的DIV是某个有明确标识的父元素的子元素（比如页面里某个带id的容器），那咱们可以先定位父元素，再锁定目标DIV：

// ==UserScript==
// @name         Remove Unidentified Images
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Remove images without id/class from a specific unmarked div
// @author       You
// @match        https://target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 先找到页面中带标识的父容器（替换成实际存在的元素选择器）
    const parentContainer = document.getElementById('some-known-container');
    if (!parentContainer) return;

    // 定位父容器下的目标DIV（比如是第3个DIV，索引从0开始）
    const targetDiv = parentContainer.querySelectorAll('div')[2];
    if (!targetDiv) return;

    // 移除该DIV内所有无id、无class的图片
    const targetImgs = targetDiv.querySelectorAll('img:not([id]):not([class])');
    targetImgs.forEach(img => img.remove());
})();

这里的img:not([id]):not([class])是CSS伪类选择器，专门筛选没有id和class属性的图片，非常精准。

方法2：遍历所有DIV，通过特征筛选目标 #

如果找不到上下文元素，咱们可以遍历页面所有DIV，通过无标识+包含目标图片的双重条件来锁定：

// ==UserScript==
// @name         Remove Unidentified Images
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Remove images without id/class from unmarked divs
// @author       You
// @match        https://target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 遍历页面所有DIV
    document.querySelectorAll('div').forEach(div => {
        // 筛选：DIV本身无id、无class，且内部存在目标图片
        if (!div.id && !div.className) {
            const targetImgs = div.querySelectorAll('img:not([id]):not([class])');
            if (targetImgs.length > 0) {
                targetImgs.forEach(img => img.remove());
            }
        }
    });
})();

如果这个DIV还有其他特征（比如固定的宽度、内部有特定文本），还可以加额外判断，比如：

// 示例：额外判断DIV的宽度是否为300px
if (!div.id && !div.className && window.getComputedStyle(div).width === '300px') {
    // ...移除图片逻辑
}

方法3：用XPath精准定位（灵活度拉满） #

如果DOM结构比较复杂，CSS选择器不好用，XPath是更好的选择——你可以直接在浏览器开发者工具里右键目标元素，复制它的XPath，再调整成我们需要的表达式：

// ==UserScript==
// @name         Remove Unidentified Images
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Remove images without id/class from unmarked divs via XPath
// @author       You
// @match        https://target-website.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // XPath表达式：找所有无id/class的DIV下的无id/class图片
    const xpathExpr = '//div[not(@id) and not(@class)]/img[not(@id) and not(@class)]';
    const imgNodes = document.evaluate(xpathExpr, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

    // 遍历移除找到的图片
    for (let i = 0; i < imgNodes.snapshotLength; i++) {
        const img = imgNodes.snapshotItem(i);
        img.remove();
    }
})();

小技巧：用开发者工具快速定位 #

打开浏览器F12的Elements面板，右键目标DIV或图片，选择「Copy > Copy XPath」或「Copy > Copy selector」，直接把复制的内容放到脚本里调整，能节省大量定位时间！

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