selenium之document.querySelector()方法

 document.querySelector()方法 

1. 常用的三种获取元素的js方式

  • document.getElementById("");
  • document.getElementsByClassName();
  • document.getElementsByTagName();
var doc=document;var box=doc.getElementById("box");var li=box.getElementsByTagName("li");var surfaces=box.getElementsByClassName("surfaces");

 querySelector()可以直接加点击事件,而querySelectorAll()不能直接加点击事件 

2. querySelector() 

var node = document.querySelector("#lover");   // 获取文档中的第一个id=lover的元素
var node = document.querySelector(".lover");   // 获取文档中的第一个class="lover"的元素
var node = document.querySelector("p.lover");  // 获取class=“lover” 的第一个p元素
var node = document.querySelector("a[target]");// 获取第一个带target属性的a元素
var element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
document.querySelector(\"body\").style="";     // 移除style属性 
document.querySelector("h2,h3").style.backgroundColor = "blue";//为文档的第一个h2元素添加背景颜色,但是,如果文档中<h3>元素位于<h2>元素之前,<h3>元素将会被设置指定的背景颜色,总结,多元素选择时,哪个先匹配就是谁咯,只有一个被选中。
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。

3. querySelectorAll

elementList = document.querySelectorAll(selectors);
elementList 是一个静态的 NodeList 类型的对象。
selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。


查找文档中共包含 "target" 属性的 <a> 标签,并为其设置边框:
 

var x = document.querySelectorAll("a[target]");var i;for (i = 0; i < x.length; i++) {x[i].style.border = "10px solid red";}

let t0 = window.performance.now();
let li = document.querySelectorAll('li');
console.log("li 的数量", li.length);
for (let i = 0; i < li.length; i++) {li[i].textContent = i;
}
let t1 = window.performance.now();
console.log("耗时" + (t1 - t0) + "毫秒");

当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时,如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。    ----> querySelectorAll 得到一个伪数组 DOM。
ParentNode.querySelectorAll()的结果是NodeList数组,但是又不是一般的js数组(Array),所以也不能直接调用Array的方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/5382.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ceph PG

概述 为了实现不同存储池之间的策略隔离&#xff0c;以及针对不同用途的存储池指定不同的容灾策略&#xff0c;ceph crush使用中间结构即Placement Group&#xff08;后续均以PG简称&#xff09;将应用数据对象进行映射后&#xff0c;写入OSD本地存储设备。PG也是我们日常运维…

常见的 HTML 标准

常见的 HTML 标准 常见的 HTML 标准发布历史 HTML&#xff08;Hypertext Markup Language&#xff09;有多个版本和标准。以下是一些常见的 HTML 标准&#xff1a; HTML 2.0&#xff1a;于1995年发布&#xff0c;是 HTML 的第一个正式标准。HTML 3.2&#xff1a;于1997年发布…

刷代码随想录有感(50):路径总和

题干&#xff1a; 代码; class Solution { public:bool traversal(TreeNode* node, int count){if(node NULL)return false;if(!node -> left && !node -> right && count 0)return true;if(!node -> left && !node -> right &&…

python挑战10秒小程序

目录 一.前言 二.代码 三.分析 一.前言 >1.小程序开始时,会出现一个倒计时器,从10秒开始。 >2.玩家需要集中注意力并估计10秒钟过去的时间。 >3.当玩家认为10秒钟已经过去时,需要点击屏幕上的按钮。 >4.小程序会显示玩家的点击时间,以及与实际10秒钟的时间…

wetrtc简介

WebRTC&#xff08;Web Real-Time Communication&#xff09;是一种实时通信技术&#xff0c;它允许网络应用或站点在无需中间媒介的情况下&#xff0c;直接在浏览器之间建立点对点&#xff08;Peer-to-Peer&#xff09;的连接&#xff0c;实现音频、视频流或其他任意数据的实时…

泰勒创造力达到顶峰?(上)

hello,大家好&#xff01;今天看一篇经济学人的一篇评论&#xff0c;说的是泰勒斯威夫特当前的创造力。经济学人总是语不惊人死不休&#xff0c;看看它对这位音乐天才做了怎样的评价。 事先声明哈&#xff0c;本文就是一种英语学习类讲述&#xff0c;没带任何个人色彩&#xff…

网络舆情分析:利用自然语言处理(NLP)洞察公众情绪

&#x1f310; 网络舆情分析&#xff1a;利用自然语言处理&#xff08;NLP&#xff09;洞察公众情绪 &#x1f4ca; 概述 在数字化时代&#xff0c;公众情绪和舆论对企业品牌、政治决策乃至社会趋势都有着深远的影响。通过自然语言处理&#xff08;NLP&#xff09;技术&#…

北京金融大数据有限公司X百望云签署战略合作协议 共同发布“金数数据要素流通云平台”

随着数据资产与数据要素相关政策密集出台&#xff0c;资本与实业企业均跃跃欲试。但因为没有龙头企业的方案引领和成熟的落地实践&#xff0c;市场呈谨慎观望态势&#xff0c;热度无处安放。 北京金融大数据有限公司&#xff08;以下简称“金融大数据公司”&#xff09;作为市…

动手学深度学习——softmax分类

1. 分类问题 回归与分类的区别&#xff1a; 回归可以用于预测多少的问题&#xff0c; 比如"预测房屋被售出价格"&#xff0c;它是个单值输出。softmax可以用来预测分类问题&#xff0c;例如"某个图片中是猫、鸡还是狗&#xff1f;"&#xff0c;这是一个多…

深入理解正则表达式:从入门到精通

title: 深入理解正则表达式&#xff1a;从入门到精通 date: 2024/4/30 18:37:21 updated: 2024/4/30 18:37:21 tags: 正则Python文本分析日志挖掘数据清洗模式匹配工具推荐 第一章&#xff1a;正则表达式入门 介绍正则表达式的基本概念和语法 正则表达式是一种用于描述字符串…

Bert基础(二十一)--Bert实战:文本摘要

一、介绍 1.1 文本摘要简介 文本摘要&#xff08;Text Summarization&#xff09;&#xff0c;作为自然语言处理&#xff08;NLP&#xff09;领域的一个分支&#xff0c;其核心目标是从长篇文档中提取关键信息&#xff0c;并生成简短的摘要&#xff0c;以提供对原始内容的高度…

Go语言map

map 概念 在Go语言中&#xff0c;map 是一种内建的数据结构&#xff0c;它提供了一种关联式的存储机制&#xff0c;允许你以键值对的形式存储数据。每个键都是唯一的&#xff0c;并且与一个值相关联。你可以通过键来查找、添加、更新和删除值&#xff0c;这类似于其他编程语言…

MAKEFILE 从易到难

相信一个简单的makefile&#xff0c; 只要用过C语言的都能写出来。 但是如果工程中包含了几十个文件夹&#xff0c; 上万个文件&#xff0c; 那用一般的方式就搞不定了。 在用dpdk 的时候&#xff0c; 会经常修改makefile要适配我们的工程。 最开始也是用dpdk中自带的makefil…

wpf 树形结构

Simplifying the WPF TreeView by Using the ViewModel Pattern - CodeProject 【原创】WPF TreeView带连接线样式的优化&#xff08;WinFrom风格&#xff09; - iDream2016 - 博客园 (cnblogs.com)

Android 音视频播放器 Demo(二)—— 音频解码与音视频同步

音视频编解码系列目录&#xff1a; Android 音视频基础知识 Android 音视频播放器 Demo&#xff08;一&#xff09;—— 视频解码与渲染 Android 音视频播放器 Demo&#xff08;二&#xff09;—— 音频解码与音视频同步 RTMP 直播推流 Demo&#xff08;一&#xff09;—— 项目…

selenium截屏代码

六、截屏应用场景&#xff1a;失败截图&#xff0c;让错误看的更直观方法&#xff1a; driver.get_screenshot_as_file(imgepath)参数&#xff1a;imagepath&#xff1a;为图片要保存的目录地址及文件名称如&#xff1a; 当前目录 ./test.png上一级目录 ../test.png扩展&#x…

Qt+Ubuntu20.04:打包qt

打包程序 参考 qt项目在Linux平台上面发布成可执行程序.run_qt.run不是虚拟机的配置文件-CSDN博客 Linux下Qt程序的打包发布(1)-不使用第三方工具 - 知乎 (zhihu.com) 过程 1、Release编译 先将你的程序在release下编译通过&#xff0c;保证下面打包的程序是你最新的。 2…

C#调用skiasharp操作并绘制图片

之前学习ViewFaceCore时采用Panel控件和GDI将图片及识别出的人脸方框和关键点绘制出来&#xff0c;本文将其修改为基于SKControl和SKCanvas实现相同的显示效果并支持保存为本地图片。   新建Winform项目&#xff0c;在Nuget包管理器中搜索并安装一下SkiaSharp和ViewFaceCore…

【AI工具合集】图片、文本、音视频工具与A I岗位面试资料

1、AI 工具集合 全球最新热门 Al 工具&#xff0c; AI 工具整合包&#xff0c;可以下载并在 Windows 系统私有化本地化运行&#xff0c;包括图片、文本、视频、音频等工具资源&#xff0c;按照功能、业务和行业来分类。 1.1 AI 图片工具 MoneyPrinter&#xff1a;一键生成短…

HTTP 多个版本

了解一下各个版本的HTTP。 上个世纪90年代初期&#xff0c;蒂姆伯纳斯-李&#xff08;Tim Berners-Lee&#xff09;及其 CERN的团队共同努力&#xff0c;制定了互联网的基础&#xff0c;定义了互联网的四个构建模块&#xff1a; 超文本文档格式&#xff08;HTML&#xff09; …