Question

如果您查看过Pinterest，您会知道他们有一个用户可以按下的书签，它会加载更多的javascript，从DOM收集某些图像并让它们在网站上固定它们。我发现收集的图像很有趣，并希望能够做到这一点。我在哪里可以学习如何从DOM中收集图像，以便让用户可以使用它们？我已经完成了google搜索，但大多数是关于使用php进行搜索，例如，如果用户位于需要登录的页面上，则无法正常工作。

Answer 1

我不太确定你在问什么，但这里是你如何使用javascript获取图片：

var images = document.getElementsByTagName("img");

这将返回一个nodeList，你可以循环遍历单个图像

for (var i=0,l=images.length;i<l;i++){
   // your code here
   console.log(images[i].src);
}

Answer 2

使用jquery http://jquery.com/

实际上非常简单

你可以做一个简单的选择器，比如$('img') ..这会给你一个页面上所有图像的集合......从中你可以使用$('img').first().attr('src')得到任何图像的来源＆lt; ===这将返回页面上第一张图片的来源

希望这会有所帮助

Answer 3

创建bookmarklet。要获取页面上的所有图像，请执行以下操作：

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    var imageSrc = images[i].src;
    // Do something with the image
    // ie, add it to the DOM and let them select one.
    // It also might be worth looking at the offsetWidth property to only grab larger images
}

以下是source to the Pinterest bookmarklet供参考

如何在javascript中从DOM中提取图像？

3 个答案: