要獲取網頁所有圖片，我們可以通過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文件。

本文實例演示及源碼文件下載

總結

以上是生活随笔為你收集整理的js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。