正文

JS/JQuery获取网页或文章或某DIV所有图片

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
1030

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

通过Javascript获取网页所有图片

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com</title>
</head>
<body>
<img src="http://www.webkaka.com/img/top_logo-new.png" >
<br><br>
<img src="http://www.webkaka.com/img/nowiterm_bg.gif" >
<br><br>
<textarea id=textarea1 cols=50 rows=10></textarea>
<br><br>
<script type="text/javascript">
        function getAllImg(){
            var obj=document.getElementsByTagName('img');
            var strImg = "网页所有图片：";
            for(var i=0;i<obj.length;i++){
                if(obj[i].getAttribute('src')){
                    strImg = strImg + "
" + obj[i].getAttribute('src');
                }
            }
            document.getElementById('textarea1').value = strImg;
        }
        getAllImg();
</script>
</body>
</html>

execcodegetcode

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

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

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

html代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com</title>
</head>
<body>
<img src="http://www.webkaka.com/img/top_logo-new.png" ><br>
<font style="color:red">非文章</font>图片地址：http://www.webkaka.com/img/top_logo-new.png
<br><br>
<div id="main" class="content" style="padding:15px;border:1px solid #666;width:500px;margin:15px;">
<img src="http://www.webkaka.com/img/nowiterm_bg.gif" ><br>
<font style="color:blue">文章</font>图片地址：http://www.webkaka.com/img/nowiterm_bg.gif
<br><br>
<img src="http://www.webkaka.com/img/menu_bg_right.jpg" ><br>
<font style="color:blue">文章</font>图片地址：http://www.webkaka.com/img/menu_bg_right.jpg
<br><br>
</div>
<textarea id=textarea1 cols=50 rows=10></textarea>
<br><br>
<script type="text/javascript">
        function getAllImg(){
            var obj=document.getElementsByClassName('content')[0].getElementsByTagName('img');
            var strImg = "文章所有图片：";
            for(var i=0;i<obj.length;i++){
                if(obj[i].getAttribute('src')){
                    strImg = strImg + "
" + obj[i].getAttribute('src');
                }
            }
            document.getElementById('textarea1').value = strImg;
        }
        getAllImg();
</script>
</body>
</html>

execcodegetcode

其实我们只需更改上述代码的一条语句即可，即是把

document.getElementsByTagName('img')

改为

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

或改为

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

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

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

<div id="main" class="content" name="mycontent">...</div>

我们还可以通过

document.getElementsByName('name名称')

来获得容器对象。

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

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

html代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com</title>
</head>
<body>
<img src="http://www.webkaka.com/img/top_logo-new.png" ><br>
<font style="color:red">非文章</font>图片地址：http://www.webkaka.com/img/top_logo-new.png
<br><br>
<div id="main" class="content" style="padding:15px;border:1px solid #666;width:500px;margin:15px;">
<img src="http://www.webkaka.com/img/nowiterm_bg.gif" ><br>
<font style="color:blue">文章</font>图片地址：http://www.webkaka.com/img/nowiterm_bg.gif
<br><br>
<img src="http://www.webkaka.com/img/menu_bg_right.jpg" ><br>
<font style="color:blue">文章</font>图片地址：http://www.webkaka.com/img/menu_bg_right.jpg
<br><br>
</div>
<textarea id=textarea1 cols=50 rows=10></textarea>
<br><br>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    //获取Class为content里面的所有img
    var imglist=$(".content img");
    //或使用下面这句，获取ID为main里面的所有img
    //var imglist=$("#main img");
 var strImg = "文章所有图片：";
    for(var i=0;i<imglist.length;i++){ 
        if(imglist[i].getAttribute('src')){
            strImg = strImg + "
" + imglist[i].getAttribute('src');
        }
    }
 document.getElementById('textarea1').value = strImg;
});
</script>
</body>
</html>

execcodegetcode

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

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

html代码

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta http-equiv="Content-Language" content="zh-CN" />
     <title>JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com</title>
</head>
<body>
<img src="http://www.webkaka.com/img/top_logo-new.png" ><br>
<font style="color:red">非文章</font>图片地址：http://www.webkaka.com/img/top_logo-new.png
<br><br>
<div id="main" class="content" style="padding:15px;border:1px solid #666;width:500px;margin:15px;">
<img src="http://www.webkaka.com/img/nowiterm_bg.gif" ><br>
<font style="color:blue">文章</font>图片地址：http://www.webkaka.com/img/nowiterm_bg.gif
<br><br>
<img src="http://www.webkaka.com/img/menu_bg_right.jpg" ><br>
<font style="color:blue">文章</font>图片地址：http://www.webkaka.com/img/menu_bg_right.jpg
<br><br>
</div>
<textarea id=textarea1 cols=50 rows=10>文章所有图片：</textarea>
<br><br>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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 + "
" + $(element).attr('src');
        }
    });
  });
</script>
</body>
</html>

execcodegetcode

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

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

demodownload