JS如何获取所有img src标签答案

【问题标题】：JS how to get all img src tagsJS如何获取所有img src标签
【发布时间】：2020-04-01 02:20:41
【问题描述】：

我想从推特上的每个<IMG> 获取 SRC。

let n = document.getElementsByTagName("img");

for(tip of n){
    console.log(tip.src);
}

它适用于其他页面，但不适用于 twitter。最后我做到了；

let n = document.getElementsByTagName("img");

function example(){
    for(tip of n){
        if(tip.src == "https://abs-0.twimg.com/emoji/v2/svg/1f1ea-1f1f8.svg"){
            tip.src = "https://abs-0.twimg.com/emoji/v2/svg/1f3f3-fe0f-200d-1f308.svg";
        }
    }
}

setInterval(example, 100);

使用 setInterval 它可以工作，此外，twitter 会动态加载内容，因此使用 setInterval 我可以获得所有这些新结果。（不使用 setInterval 怎么办？）

另外，由于某些奇怪的原因，图片没有改变。它不更新。

更新：

function example(){
let n = document.getElementsByTagName("div");
    for(tip of n){
        console.log(tip.style['background-image']);

        if(tip.style['background-image'] == 'url("https://abs-0.twimg.com/emoji/v2/svg/1f1ea-1f1f8.svg")'){
            tip.style['background-image']= 'url("https://abs-0.twimg.com/emoji/v2/svg/1f3f3-fe0f-200d-1f308.svg")';
        }
    }
}

setInterval(example, 10000);

现在它可以完美运行了，但是我如何在不使用 setInterval eeeeeeevery 的情况下获取新数据并且只在必要时调用该函数？

【问题讨论】：

正如你所提到的，“twitter 动态加载内容”因此我们无法获取所有图像的 src，而只能获取当前加载的图像。
@palaѕн 但是使用 setInterval 我会得到新的结果，对吧？关键是，即使我能拿到 src，我也因为一些奇怪的原因无法更改它
发生这种情况是因为 twitter 使用 background-image: url(...) 在 div 上设置图像。
@palaѕн 大声笑，你是对的。我怎样才能访问那个 div？我的意思是，每个 div 都有相同的名称类
@palaѕн 好的，已修复，现在效果很好，那么 setInterval 呢？（我更新了帖子）

标签： javascript twitter

【解决方案1】：

每次你想要迭代它们时都必须加载图像，以获得“新鲜”的 img 元素

试试这个

function example(){
    let n = document.getElementsByTagName("img");  // Moved here
    for(tip of n){
        if(tip.src == "https://abs-0.twimg.com/emoji/v2/svg/1f1ea-1f1f8.svg"){
            tip.src = "https://abs-0.twimg.com/emoji/v2/svg/1f3f3-fe0f-200d-1f308.svg";
        }
    }
}

setInterval(example, 100);

【讨论】：

【解决方案2】：

图像并不总是带有img 标签。

如果你在 twitter 上看到一些案例，img 标签的兄弟元素是一个样式为 img src 的元素。该元素正在显示图像。显然，Twitter 上的每一张图片都不是这种情况。

但是对于这种情况，你改变它的背景

let n = document.getElementsByTagName("img");

for(tip of n){
    r.previousSibling.style.backgroundImage='YourImage.png'
}

此外，您必须使用某种间隔来获取稍后加载的结果。或者您可以使用Mutation Observer 检测 DOM 更改，并且仅在 DOM 更改时触发您的函数。

【讨论】：