js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片

要获取网页所有图片，我们可以通过Javascript就能轻松实现，不过要想获得文章或某容器(如：Div)里所有图片，使用JQuery而不是Javascript来实现就会变得更加简单。本文将给你详细介绍。

通过Javascript获取网页所有图片

html代码

JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com

function getAllImg(){

var obj=document.getElementsByTagName('img');

var strImg = "网页所有图片：";

for(var i=0;i

if(obj[i].getAttribute('src')){

strImg = strImg + "\r\n" + obj[i].getAttribute('src');

}

}

document.getElementById('textarea1').value = strImg;

}

getAllImg();

上述例子是通过 document.getElementsByTagName('img') 来获得网页所有图片对象的，然后通过for循环得到各图片的URL地址。

通过Javascript获取网页文章或某个容器的所有图片

实际使用中，我们往往不要获得网页的所有图片，而是要获得某个区块的图片，例如如果我们要获得文章的所有图片，那又该怎么写Javascript代码呢？请看代码 。

html代码如下

JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com

非文章图片地址：http://www.webkaka.com/img/top_logo-new.png

文章图片地址：http://www.webkaka.com/img/nowiterm_bg.gif

文章图片地址：http://www.webkaka.com/img/menu_bg_right.jpg

function getAllImg(){

var obj=document.getElementsByClassName('content')[0].getElementsByTagName('img');

var strImg = "文章所有图片：";

for(var i=0;i

if(obj[i].getAttribute('src')){

strImg = strImg + "\r\n" + obj[i].getAttribute('src');

}

}

document.getElementById('textarea1').value = strImg;

}

getAllImg();

其实我们只需更改上述代码的一条语句即可，即是把document.getElementsByTagName('img')

改为document.getElementById('容器ID').getElementsByTagName('img')

或改为document.getElementsByClassName('容器类名')[0].getElementsByTagName('img')

特别注意，getElementsByClassName('容器类名')返回一个数组列，例如网页有多个div使用了此类，所以要用 [0]、[1]、[2]...来准确定位是哪个。

此外，如果容器声明了name属性，如：

...

我们还可以通过document.getElementsByName('name名称')

来获得容器对象。

通过JQuery获取网页文章或某个容器的所有图片

JQuery获取网页文章或某个容器的所有图片的写法跟Javascript有些不同，其实思路是一样。

html代码如下

JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com

非文章图片地址：http://www.webkaka.com/img/top_logo-new.png

文章图片地址：http://www.webkaka.com/img/nowiterm_bg.gif

文章图片地址：http://www.webkaka.com/img/menu_bg_right.jpg

$(document).ready(function() {

//获取Class为content里面的所有img

var imglist=$(".content img");

//或使用下面这句，获取ID为main里面的所有img

//var imglist=$("#main img");

var strImg = "文章所有图片：";

    for(var i=0;i

if(imglist[i].getAttribute('src')){

strImg = strImg + "\r\n" + imglist[i].getAttribute('src');

}

}

document.getElementById('textarea1').value = strImg;

});

关键代码 $("#main img") 或 $(".content img") 获得容器里的所有图片。并且要注意使用JQuery时要先引用jquery文件。

JQuery获取网页文章或某个容器的所有图片，还有另一个写法。

html代码

JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com

非文章图片地址：http://www.webkaka.com/img/top_logo-new.png

文章图片地址：http://www.webkaka.com/img/nowiterm_bg.gif

文章图片地址：http://www.webkaka.com/img/menu_bg_right.jpg

文章所有图片：

$(document).ready(function() {

$(".content img").each(function(index, element) { //$(".content img") 可换为 $("#main img")

if($(element).attr('src')){

var obj = document.getElementById('textarea1');

obj.value = obj.value + "\r\n" + $(element).attr('src');

}

});

});

这写法前面的写法代码少一些，推荐使用。注意使用JQuery时要先引用jquery文件。

本文实例演示及源码文件下载