puppeteer 获取指定元素

2024-08-28

【PUPPETEER】初探之元素获取（二）

一.涉及的知识点如何使用css selector 常用元素获取 $ 元素选择 type (api 输入) click (api 点击) 二.学习网址 https://github.com/GoogleChrome/puppeteer/blob/v1.19.0/docs/api.md 三.环境 node js puppeteer 编辑器 vscode 四.实例 -- 常用元素选择器选择器示例解释 id选择器 #id 选择匹配id的元素,仅存在一个 class选择器 .class 同时匹配多

如何通过源生js获取一个元素的具体样式值 /* getCss：获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */

昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或者外链样式设置的值是获取不到,因此这个方法在实际项目中用的会比较少. 方法二:通过window.getComputedStyle(dom,null).属性名来获取(针对标准浏览器),在非标准浏览器中这个方法是没有的,我们可以用currentStyle--dom.currentStyle.属性名来实现

JQuery获取指定元素中的checkbox选中状态的一些属性

项目中用户上传病例数据,每一次上传自动生成一个病例文件夹,数据保存到后台,前端显示文件夹,现在的需求是勾选想要删除的文件夹的chenckbox,点击删除后,数据库和前端都相应的更新. 如果是静态页面,直接根据id或者class定位到checkbox,然后判断状态,直接remove即可.但是动态页面,需要与后台交互同步,前端相应的文件夹删除,后台数据库也要删除文件夹内的数据,每一个病例文件夹对应数据库的一个recordId,那么问题是,如何知道当前checkbox选中的文件夹对应的病例id(文件夹

DataTables获取指定元素的行数据

法1: 用jquey获取,var row = $('.edit').parent().parent(); 缺点:只能获取dom上的东西,不能获取没有渲染的数据法2: 首先绑定行号到元素上 $('#example').dataTable( { "columns": [ {"data":"name", "orderable": false, "searchable": false,"render&q

通过id获取指定元素内容（标签里面的标签内容获取）

html页面如下 <tr style="background-color:#fff;"> <td colspan="2" align=left valign="top"> <table id="zoom2" width="94%" border="0" cellspacing="0" cellpadding="0" s

JSON对象获取指定元素以及JSON.parse() 与 JSON.stringify() 的区别

利用 JSON.parse(param) 实现例: var param = { "name" : "张三", "text" : { "age" : "18", "sex" : "male" } } var obj = JSON.parse(param) ; //由JSON字符串转换为JSON对象然后,就可以这样读取: console.log( obj.text )

利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)

对WebElement截图 WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素.若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了. WebDriver.PhantomJS自带的方法支持对整个网页截屏. 下面提供几种思路. 方式一针对WebDriver.Chrome 通过WebDriver的js脚本注入功能,曲线救国. 注入第三方html转canvas的js库(见下方推荐) 获取元素html源码将html转换为canvas 下载canvas 优点: 截取长

使用getElementById获取xml中的指定元素

Document有一个getElementById的方法,在文档中的解释是: 返回具有带给定值的 ID 属性的 Element.如果不存在此类元素,则此方法返回 null.如果多个元素具有带该值的 ID 属性,返回哪一个元素是不确定的. 注: 具有名称 "ID" 或 "id" 的属性不属于类型 ID,除非这样定义. <root> <test id="test"> haha <

jQuery 获取页面元素的属性值

获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 : $(document).width(); 浏览器当前窗口文档body的高度: $(document.body).height(); 浏览器当前窗口文档body的宽度: $(document.body).width

JavaScript：JavaScript中常见获取对象元素的方法

介绍: javascript中常见的3种获取元素的方法,分别是通过元素ID.通过标签名字和通过类名字来获取操作如下: 1.getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象.使用的时候请注意区分大小写. 它是document对象特有的函数,只能通过其来调用该方法.其使用的方法如下: document.getElementById('demo') //demo是元素对应的ID 该方法兼容主流浏览器,甚至包括IE6+,

javascript获取类元素

代码测试是ie5+: 原生javascript中筛选出含有指定类的元素: 思想:在指定范围里把所有的元素筛选出来,然后把里面的每个元素都遍历找出它们含有的所有类,然后逐个元素遍历它们各自的类,如果指定的类和它们里面的类相等,那么就把这个元素放进一个数组中然后返回这个数组. <span style="font-size:18px;"><!DOCTYPE HTML> <html lang="en-US"> <head> &

js实现未知宽高的元素在指定元素中垂直水平居中

js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.soft

JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以读取文本框中的值.设置文本框中的值. JavaScript→DOM就是C#→.Net Framwork.没有.net,C#只能for.while,连WriteLine.MessageBox都不行.DOM就是一些让JavaScript能操作Html页面控件的类.函数. DOM也像WinForm一样,通

滚动到指定元素的id处+当元素出现在浏览器显示区域就会自动加载

//滚动到指定元素的id处如:$("#Exam82") function Jump() { var scroll_offset = $("#Exam82").offset(); //得到Exam82这个div层的offset,包含两个值,top和left $("body,html").animate({ scrollTop: scroll_offset.top //让body的scrollTop等于Exam82的top,就实现了滚动 },

jQuery下实现检测指定元素加载完毕

检测元素出现方法.虽然是基于 jQuery 的,但是代码很简洁,可以修改成纯js版的. 文本 jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.len

getBoundingClientRect()来获取页面元素的位置”

getBoundingClientRect()来获取页面元素的位置” 获取的是一个对象; 延伸阅读; https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=403029188&idx=2&sn=1088e273b855b75815edb2e7977a0513&scene=0&key=710a5d99946419d988a823a3f76c4dabc336d68c1e192697aba3d5cdba0fce0f3d

document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸, 尤其是 document.getElementById 和 document.getElementsByClassName, 看看下面截图,用上面2种方法获取到元素并添加点击事件后,控制台会打印出什么呢? 可能有小伙伴晃眼一看,这么简单,不就是 1和2 吗,真的是这样吗?下面看看控制台的打印截图结果是只打出了1,为什么没有打印出2呢? 现在我们把2种获取DOM的方法打印出来,如下截图, console.log(

给HTML页面指定元素添加属性，添加父元素

给HTML页面指定元素添加属性,添加父元素下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img 此处用到querySelectorAll 函数 for 遍历标签修改需求复习jQuery属性 wrap给指定元素增加父元素 JS属性 .src获取标签路径值 setAttribute给标签赋值 <script type="text/javascript"> //给指定标签追加父元素 $('.memorandum

python selenium截取指定元素图片

1.截取当前屏幕 @property def getImage(self): ''' 截取图片,并保存在images文件夹 :return: 无 ''' timestrmap = time.strftime('%Y%m%d_%H.%M.%S') imgPath = os.path.join(gl.imgPath, '%s.png' % str(timestrmap)) self.driver.save_screenshot(imgPath) print 'screenshot:', timest

jQuery下实现等待指定元素加载完毕

先声明下这个方法的使用场合,以免误导大家..比如在博客园,我们没法修改他的源代码,那么只能想办法监视元素的出现了.所以下面方法是在修改不了源码的情况下使用,而非写自己的项目.. 今天在改博客几个样式的时候,以为很自然的加上js就可以实现了,没想到那个是ajax加载的数据,而非页面首次加载的,比如下面的 “提交评论” 按钮,右侧的搜索按钮等.我很自然的写了 $("#btn_comment_submit").removeClass("comment_btn").ad

随机获取指定范围内N个不重复数字

/// <summary> /// 随机获取指定范围内N个不重复数字 /// </summary> /// <param name="min">指定范围最小值</param> /// <param name="max">指定范围最大值</param> /// <param name="num">不重复数字的个数</param> /// <retu

puppeteer 获取指定元素

热门专题