首页
学习
活动
专区
工具
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文件,这个好处就是比较快速,但是所有的文件都放到一个文件中

1.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.9K10
  • 使用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.7K70

    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 属性,这样就成功提取了商品图片链接。

    96122

    用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 看下面的图: ?

    1K30

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

    通用适用于从HTML文件中查找数据。工欲善其事必先利其器,我们首先来了解XPATH常用的语法规则。...匹配所有拥有class属性的li元素 //li/a/@href 获取所有li元素a子元素的href属性值,注意和//li[@class="li_item1"的且 //li//text() 过去li节点所有子节点的文本...() 获取class属性值包含li的li节点所有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。

    89710

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

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

    54310

    图片懒加载原理及实现(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.8K30

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

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

    1.5K71

    Python3网络爬虫实战-27、Req

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

    56620

    3分钟搞定图片懒加载

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

    2.5K20

    pyspider使用教程

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

    3.9K32

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

    前言 图片懒加载其实已经是一个近乎“烂大街”的词语了,在大大小小的面试中也会被频繁的问到,我在之前的面试中也被问到了图片懒加载的原因、实现方式及底层原理,但由于自己平时很少做“图片”相关的处理,对于“懒加载...今天,我将首先从浏览器底层渲染机制来剖析为什么要去做图片懒加载,之后我将带大家一起来看下目前主流的几种实现图片懒加载的方式及其实现原理,最后会做一个展望。...为什么要做图片懒加载 要问答这个问题,首先我们先来看下浏览器的底层渲染机制: 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),即用户能不能看到它。 ?

    95431

    高级前端二面常见面试题总结_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 文件的内容下载相应的资源并且进行离线存储

    94820

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

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

    91610

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

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

    3.1K30

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

    于是就想到了图片懒加载来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能,可以大幅度的提高网页加载速度,效果很明显,于是想着将这个方法记录下来,方便以后或者有需要的人使用...二、原理 先将 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,作为标识 // 弄这个的初衷是因为,每次滚动的时候,所有的图片都会遍历一遍,这样有点浪费

    48830

    前端性能优化系列 | 加载优化

    从上面的描述中可知,预提取最适合的场景就是为用户的下一步可能的操作做好必要的准备,比如在搜索框搜索内容时,可以预提取结果列表中首个内容的详情页,或者在使用搜索查询是,预提取搜索结果的下一页的内容。...我了解的预加载的最常用的方式是使用 js 中的 image 对象,通过为 image 对象来设置 scr 属性,来实现图片的预加载。...根据这个原理,可以使用HTML5 的data-xxx属性来储存图片的路径,在需要加载图片时,将data-xxx中图片的路径赋值给src,这样就实现了图片的按需加载,即懒加载。...如果用户进入指定的链接,隐藏的这个页面就会进入马上进入用户的视线。这个属性虽然强大,但是却不能乱用,一定要确定这个页面用户的确会进行点击,才可以进行设置。...,需要对所有source子元素进行迭代解析,将data-src的属性值迁移到src上。

    11710

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

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

    99930
    领券