首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我不能抓取这个HTML的'data-src‘属性中的所有内容

抓取HTML中的'data-src'属性中的所有内容的原因可能是因为该属性的内容是通过JavaScript动态加载的,而不是在HTML文档中静态存在的。当浏览器解析HTML文档时,它只会获取静态的HTML内容,而不会执行JavaScript代码来获取动态加载的内容。

要抓取'data-src'属性中的内容,您可以使用JavaScript来实现。以下是一种可能的方法:

  1. 使用JavaScript获取包含'data-src'属性的所有元素。您可以使用document.querySelectorAll()方法来选择所有具有'data-src'属性的元素。例如:
代码语言:txt
复制
var elements = document.querySelectorAll('[data-src]');
  1. 遍历这些元素并获取它们的'data-src'属性值。您可以使用元素的getAttribute()方法来获取'data-src'属性的值。例如:
代码语言:txt
复制
for (var i = 0; i < elements.length; i++) {
  var dataSrc = elements[i].getAttribute('data-src');
  console.log(dataSrc);
}

请注意,这种方法只能在浏览器中执行,并且需要在页面加载完成后才能获取到动态加载的内容。如果您需要在服务器端抓取HTML内容并获取'data-src'属性中的内容,您可能需要使用一些其他的工具或技术,如爬虫框架或浏览器自动化工具。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法提供相关链接。但是,腾讯云提供了丰富的云计算服务,您可以访问腾讯云官方网站以获取更多信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用Python把公众号文章打包成pdf文件,不再怕自己劳动成果被丢失

用Python抓取某大V公众号文章 Python抓取公众号文章并生成pdf文件保存到本地 最近终于把这个瑕疵给解决了, 另外再解决了其它几个问题,算是比较完美的升级吧! 先看效果图: ?...因为公众号文章里图片是用data-src来标记,这在pdf不能显示图片,所以我在这里把,data-src替换成了src,然后图片就可以显示出来. def create_article_content...因为内容抓取过来后,还想去点击原文,所以有了这个超链接,像上面图片中【点击查看公众号原文】,再看看如何生成pdf文件....是文件内容,这里把文件内容定稿到一个临时html文件,然后把这个临时html文件用pdfkit工具转换成pdf文件....所有文章生成一个文件 这里是把所有html文件内容组成一个数组,然后把这些内容列表转换成html文件列表,然后把html文件列表放到pdfkit中转换成一个pdf文件,这个好处就是比较快速,但是所有的文件都放到一个文件

1K20

Selenium 抓取淘宝商品

我们可以尝试分析Ajax来抓取了相关数据,但是并不是所有的页面都是可以分析Ajax来就可以完成抓取,比如淘宝。...[1502092609796_456_1502092612506.jpg] 但是这个Ajax接口包含了几个参数,其中_ksTS、rn参数不能直接发现其规律,如果我们要去探寻它生成规律也不是做不到...class、data-src、alt、src等属性,在这里我们之所以可以看到这张图片是因为它src属性被赋值为图片URL,在这里我们就把它src属性提取出来就可以获取商品图片了,不过这里我们还注意到有一个...data-src属性,它内容也是图片URL,观察后发现此URL是图片完整大图,而src是压缩后小图,所以这里我们抓取data-src属性来作为商品图片。...所以我们需要先利用find()方法先找到图片这个节点,然后再调用attr()方法获取商品data-src属性即可,这样就成功提取了商品图片链接。

2.8K10

使用Selenium爬取淘宝商品

在前一章,我们已经成功尝试分析Ajax来抓取相关数据,但是并不是所有页面都可以通过分析Ajax来完成抓取。...但是这个Ajax接口包含几个参数,其中_ksTS、rn参数不能直接发现其规律,如果要去探寻它生成规律,也不是做不到,但这样相对会比较烦琐,所以如果直接用Selenium来模拟浏览器的话,就不需要再关注这些接口参数了...比如,查看一下商品信息源码,如下图所示。 ? 可以发现,它是一个img节点,包含id、class、data-src、alt和src等属性。...不过我们还注意data-src属性,它内容也是图片URL,观察后发现此URL是图片完整大图,而src是压缩后小图,所以这里抓取data-src属性来作为商品图片。...因此,我们需要先利用find()方法找到图片这个节点,然后再调用attr()方法获取商品data-src属性,这样就成功提取了商品图片链接。

3.6K70

Python Selenium 爬虫淘宝案例

前言 在前一章,我们已经成功尝试分析 Ajax 来抓取相关数据,但是并不是所有页面都可以通过分析 Ajax 来完成抓取。...比如,我们最终要等待商品信息加载出来,就指定了 presence_of_element_located 这个条件,然后传入了.m-itemlist .items .item 这个选择器,而这个选择器对应页面内容就是每个商品信息块...比如,查看一下商品信息源码。 可以发现,它是一个 img 节点,包含 id、class、data-src、alt 和 src 等属性。...不过我们还注意 data-src 属性,它内容也是图片 URL,观察后发现此 URL 是图片完整大图,而 src 是压缩后小图,所以这里抓取 data-src 属性来作为商品图片。...因此,我们需要先利用 find() 方法找到图片这个节点,然后再调用 attr() 方法获取商品 data-src 属性,这样就成功提取了商品图片链接。

50222

一起学爬虫——使用xpath库爬取猫眼电

通用适用于从HTML文件查找数据。工欲善其事必先利其器,我们首先来了解XPATH常用语法规则。...匹配所有拥有class属性li元素 //li/a/@href 获取所有li元素a子元素href属性值,注意和//li[@class="li_item1"且 //li//text() 过去li节点所有子节点文本...() 获取class属性值包含lili节点所有a子节点文本 //div[contains(@class,"div") and @id="div_id1"]/ul 获取所有class属性包含“div”...XPATH要配合requests一起使用,使用requests抓取网页信息,然后使用XPATH解析网页信息,XPATH在lxml库,因此需要在pycharm安装lxml。...,要注意xpath规则是否准确,有些浏览器会加上一些多余标签,或者将节点属性名改掉,例如上面例子中将img节点src属性变为data-src

84210

用Python把公众号文章打包成pdf文件,不再怕自己劳动成果被丢失

因为公众号文章里图片是用data-src来标记,这在pdf不能显示图片,所以我在这里把,data-src替换成了src,然后图片就可以显示出来. def create_article_content...因为内容抓取过来后,还想去点击原文,所以有了这个超链接,像上面图片中【点击查看公众号原文】,再看看如何生成pdf文件....是文件内容,这里把文件内容定稿到一个临时html文件,然后把这个临时html文件用pdfkit工具转换成pdf文件....所有文章生成一个文件 这里是把所有html文件内容组成一个数组,然后把这些内容列表转换成html文件列表,然后把html文件列表放到pdfkit中转换成一个pdf文件,这个好处就是比较快速,但是所有的文件都放到一个文件...,所以不管了,直接复制charles里 url和cookie就好了, 所以你不能直接用代码里cookie和base_url 看下面的图: ?

91730

Python爬虫实战:抓取猫眼电影排行榜top100

抓取猫眼电影排行 本节,我们利用 requests 库和正则表达式来抓取猫眼电影 TOP100 相关内容。...抓取首页 接下来用代码实现这个过程。首先抓取第一页内容。我们实现了 get_one_page 方法,并给它传入 url 参数。然后将抓取页面结果返回,再通过 main 方法调用。... 随后需要提取电影图片。可以看到,后面有 a 节点,其内部有两个 img 节点。经过检查后发现,第二个 img 节点 data-src 属性是图片链接。...这里提取第二个 img 节点 data-src 属性,正则表达式可以改写如下: .*?board-index.*?>(.*?).*?data-src="(.*?)"... 这样一个正则表达式可以匹配一个电影结果,里面匹配了 7 个信息。接下来,通过调用 findall 方法提取出所有内容

27610

使用requests+正则表达式爬取猫眼电影排行

本节,我们利用requests库和正则表达式来抓取猫眼电影TOP100相关内容。...抓取首页 接下来用代码实现这个过程。首先抓取第一页内容。我们实现了get_one_page()方法,并给它传入url参数。然后将抓取页面结果返回,再通过main()方法调用。... 随后需要提取电影图片。可以看到,后面有a节点,其内部有两个img节点。经过检查后发现,第二个img节点data-src属性是图片链接。...这里提取第二个img节点data-src属性,正则表达式可以改写如下: .*?board-index.*?>(.*?).*?data-src="(.*?)"... 这样一个正则表达式可以匹配一个电影结果,里面匹配了7个信息。接下来,通过调用findall()方法提取出所有内容

1.4K71

图片懒加载原理及实现(java懒加载原理)

一,前置知识 1,为什么要图片懒加载 懒加载是一种对网页性能优化方式,比如当访问一个页面的时候,优先显示可视区域图片而不是一次性加载所有图片,当需要显示时,再发送图片请求,避免打开网页时加载过多资源...于是就可以知道,当进入页面的时候,其实我们已经把所有的图片这个地址信息拿到了,图片懒加载作用就是让这个图片src按需发起请求,获取图片。...然后,html5还提供自定义属性方式:data-xxx 我们可以先把图片地址存在这里面,然后判断这个图片是否进入屏幕了,一旦进入屏幕,就把这个图片地址赋值给src,让它发起请求获取图片不就好了!...src,而是一个自定义属性data-src imgs[i].src = imgs[i].dataset.src; } } } //第一次页面加载时候...src,而是一个自定义属性data-src imgs[i].src = imgs[i].dataset.src; } } } //第一次页面加载时候

1.6K30

Python3网络爬虫实战-27、Req

本节我们利用 Requests 和正则表达式来抓取猫眼电影 TOP100 相关内容,Requests 相较于 Urllib 使用更加方便,而目前我们还没有系统学习 HTML 解析库,所以可能对 HTML...TOP100 所有电影信息了。...抓取首页 接下来我们用代码实现这个过程,首先抓取第一页内容,我们实现一个 get_one_page() 方法,传入 url 参数,然后将抓取页面结果返回,然后再实现一个 main() 方法调用一下,... 随后我们需要提取电影图片,可以看到在后面有个 a 节点,其内部有两个 img 节点,经过检查后发现第二个 img 节点 data-src属性是图片链接,在这里我们提取第二个 img 节点...data-src属性,所以正则可以改写如下: .*?

54520

3分钟搞定图片懒加载

而且,用户可能只翻看一两页就退出了,剩下未查看图片也就不需要加载了。这也相当于节省了带宽资源。 懒加载实现原理 由于浏览器会自动对页面img标签src属性发送请求并下载图片。...因此,通过html5自定义属性data-xxx先暂存src值,然后在需要显示时候,再将data-xxx值重新赋值到imgsrc属性即可。...下面改造成懒加载: 首先将页面上图片 src 属性设为空字符串,而图片真实路径则设置在data-src属性。...当页面滚动时候需要去监听scroll事件,在scroll事件回调,判断我们懒加载图片判断是否出现在视口内,如果出现在视口内,则将data-src赋值到src。...思路:当页面滚动时候需要去监听scroll事件,在scroll事件回调,判断滚动条是否滚动到最底部,如果是,则将将图片 src 属性设置为data-src值。

2.4K20

pyspider使用教程

官方文档),pyquery和jQuery类似,主要用来方便地抓取返回html文档对应标签数据 detail_page(self, response) 返回一个 dict 对象作为结果,结果会自动保存到默认...爬取指定数据 接下来我们通过自定义来抓取我们需要数据,目标为抓取这个页面,每个详情页内容标题、标签、描述、图片url、点击图片所跳转url。 ? ?...页面所有信息之后回调,我们需要在该函数对 response 进行处理,提取出详情页url。...each(‘a’).attr.href 对于每个 div 标签,获取它 a 标签 href 属性。 可以将最终获取到url打印,并传入 crawl 中进行下一步抓取。...具体html源码如下图: ? 其余数据分析抓取思路基本一致。

3.6K32

彻底玩转图片懒加载及底层实现原理

前言 图片懒加载其实已经是一个近乎“烂大街”词语了,在大大小小面试也会被频繁问到,在之前面试也被问到了图片懒加载原因、实现方式及底层原理,但由于自己平时很少做“图片”相关处理,对于“懒加载...今天,将首先从浏览器底层渲染机制来剖析为什么要去做图片懒加载,之后将带大家一起来看下目前主流几种实现图片懒加载方式及其实现原理,最后会做一个展望。...为什么要做图片懒加载 要问答这个问题,首先我们先来看下浏览器底层渲染机制: 1、构建 DOM 树 2、样式计算 3、布局阶段 4、分层 5、绘制 6、分块 7、光栅化 8、合成 而在构建DOM过程如果遇到...该函数返回一个rectObject对象,该对象有 6 个属性:top, left, bottom, right, width, height;这里top、left和css理解很相似,width、height...“这里我们参考阮一峰大佬关于IntersectionObserver API[3]介绍。 我们在平时开发,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它。 ?

87831

高级前端二面常见面试题总结_2023-02-27

console.log(Person.constructor)//Function 一个空函数 console.log(Person.prototype)//打印出Person.prototype这个对象里所有的方法和属性...title属性没有明确意义只表示是个标题,H1则表示层次明确标题,对页面信息抓取有很大影响 i内容展示为斜体,em表示强调文本 懒加载实现原理 图片加载是由src引起,当对src赋值时,浏览器就会请求图片资源...根据这个原理,我们使用HTML5 data-xxx属性来储存图片路径,在需要加载图片时候,将data-xxx图片路径赋值给src,这样就实现了图片按需加载,即懒加载。...产生乱码原因: 网页源代码是gbk编码,而内容中文字是utf-8编码,这样浏览器打开即会出现html乱码,反之也会出现乱码; html网页编码是gbk,而程序从数据库调出呈现是utf-8编码内容也会造成编码乱码...在线情况下,浏览器发现 html 头部有 manifest 属性,它会请求 manifest 文件,如果是第一次访问页面 ,那么浏览器就会根据 manifest 文件内容下载相应资源并且进行离线存储

88020

因为读者一个问题,写了个批量下载工具

之前分享过回答几个很多人在问问题,以及苏生不惑提供服务 ,有人加我微信帮忙批量下载公众号文章里音频,正好之前下载过一键批量下载微信公众号文章内容/图片/封面/视频/音频,支持导出html和pdf格式...,包含阅读数/点赞数/在看数/留言数 ,于是研究了下,很快就搞定了,顺便用python打包了个工具 以这篇文章为例 ,作者整理了上百篇文章: 单篇文章音频用idm就能下载: 批量下载需要先抓取所有文章链接再下载...如果用mac系统可以安装这个油猴脚本https://greasyfork.org/zh-CN/scripts/435495 ,油猴脚本之前分享过很多次了油猴脚本神器加1 如果还想批量下载视频参考之前文章一键批量下载微信公众号文章内容...,比如抓取过深圳卫健委公众号数据听说公众号深圳卫健委被网友投诉尺度大,抓取所有文章标题和阅读数分析了下, 留言内容可以下载抓取了公众号历史文章留言 ,如果你有需要下载公众号或抓取数据可以微信联系...再次推荐下博客https://blog-susheng.vercel.app ,存放了部分公众号文章10 分钟带你免费搭建一个属于自己博客 ,方便在线查看: 以及之前分享过网站,Windows

85810

网页性能优化之图片懒加载

于是就想到了图片懒加载来减轻服务器压力,优先加载可视区域内容,其他部分等进入了可视区域再加载,从而提高性能,可以大幅度提高网页加载速度,效果很明显,于是想着将这个方法记录下来,方便以后或者有需要的人使用...二、原理 先将 img 标签 src 链接设为同一张图片(一般是loading.gif图片),然后给 img标签 设置自定义属性data-src),然后将真正图片地址存储在 data-src ...,当JS监听到该图片元素进入可视窗口时,将自定义属性地址存储到src属性。...,就是把自定义属性data-src 存储真正图片地址,赋值给src function loadImg($img){ $img.attr('src', $img.attr...('data-src')); // 已经加载图片,给它设置一个属性,值为1,作为标识 // 弄这个初衷是因为,每次滚动时候,所有的图片都会遍历一遍,这样有点浪费

45130

Python——爬虫实战 爬取淘宝店铺内所有宝贝图片

那么今天,我们就正式开始我们第一篇实战内容,爬取一整个淘宝店铺里所有宝贝详情页,并且把详情页里宝贝图片保存下来。自己刚开了一个小网店,当时写出这个爬虫,也是真真正正自己服务了一回呢。...在写之前,先把这个爬虫代码分析一下,方便大家在看代码时候,理解整个流程是怎么样。...爬虫框架一直是使用Scrapy,在用Scrapy抓取店铺信息时候,因为淘宝反爬机制,发现了机器人,所以获取不到任何信息,当时赶着用宝贝图片,所以我使用了之前介绍selenium来获取网页信息...最主要库就是这两个,那么针对这个爬虫,编写了一个叫做taobaoShop爬虫类。...之后,我们首先进入店铺首页,抓取首页所有商品资料,并用他们宝贝名,来生成文件夹,方便存储对应详情图片,然后爬虫进入宝贝详情页,从详情页中提取详情照片,并且保存在宝贝名称对应文件夹,在该页面所有的宝贝爬取完成后

2.8K30

实现一个Vue自定义指令懒加载

比如我们加载一个页面,这个页面很长很长,长到我们浏览器可视区域装不下,那么懒加载就是优先加载可视区域内容,其他部分等进入了可视区域在加载。...这个功能非常常见,你打开淘宝首页,向下滚动,就会看到会有图片不断加载;你在百度搜索图片,结果肯定成千上万条,不可能所有的都一下子加载出来,很重要原因就是会有性能问题。...你可以在Network查看,在页面滚动时候,会看到图片一张张加载出来。 ? lazyLoad 为什么要做图片懒加载 懒加载是一种网页性能优化方式,它能极大提升用户体验。...懒加载原理 图片标签是 img标签,图片来源主要是 src属性,浏览器是否发起加载图片请求是根据是否有src属性决定。...所以可以从 img标签 src属性入手,在没进到可视区域时候,就先不给 img 标签 src属性赋值。 懒加载实现 实现效果图: ? imgLazyLoad <!

95730

性能优化-懒加载(图片 组件 路由)

为什么需要懒加载? 组件、图片、路由对页面加载速度影响非常大。比如,当一个页面内容比较多时候,加载速度就会大大降低,极大影响到用户体验 。...在vue组件懒加载又称为代码分割,也叫延迟加载,即在需要时候进行加载,随用随载。图片懒加载实现原理一张图片就是一个标签,而图片来源主要是依靠src属性。...浏览器是否发起请求根据是否有src属性决定。在没有进到可视区时候,就不给赋src属性,这样就不会发起请求。...代码部分://src存放是加载图片 data-src存放才是真正图片地址 实现JavaScript...不加立即执行函数i会等于9 // 隐形加载图片或其他资源, //创建一个临时图片,这个图片在内存不会到页面上去

66730
领券