selenium之document.querySelector()方法

devtools/2024/9/20 7:14:02/ 标签: javascript

 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.ppmy.cn/devtools/26828.html

相关文章

Oracle数据常驻程序内存优化【数据库实例优化系列三】

Oracle程序常驻程序内存优化【数据库实例优化系列二】-CSDN博客 在生产中,为提高用户的访问速度。可以将经常使用的表常驻与内存中。避免频繁的访问磁盘,降低IO。 虽然会占用一定的内存,但是效果还是很明显的。 如果不是用了,DBA可以将其删除。 一、数据缓冲池 数据库…

Kafka 2.13-3.7.0 在 Windows 上的安装与配置指南

在本文中&#xff0c;我将引导您完成在Windows操作系统上安装Apache Kafka 2.13-3.7.0的全过程&#xff0c;包括下载Scala运行环境、Kafka软件包、配置相关设置&#xff0c;并最终启动Kafka服务。此外&#xff0c;还会简要介绍如何使用客户端工具进行查看和管理。 Kafka的命名…

MAC M1电脑部署Grafana+Prometheus+Node_exporter

一、安装 1、grafana安装 brew install grafana 2、prometheus安装 brew install prometheus 3、node_exporter安装 brew install node_exporter 二、启动 1、grafana启动 brew services start grafana 2、prometheus启动 brew services start prometheus 3、node_exporter启动…

Scala 多版本下载指南

Scala&#xff0c;这一功能丰富的编程语言&#xff0c;结合了面向对象和函数式编程的精华&#xff0c;为开发者提供了强大的工具来构建高效、可扩展的应用程序。随着Scala社区的不断壮大和技术的演进&#xff0c;多个版本的Scala被广泛应用于不同的项目与场景中。本文旨在为您提…

什么ISP是住宅IP,和普通IP有什么区别?

ISP&#xff08;Internet Service Provider&#xff09;即互联网服务提供商&#xff0c;是向广大用户综合提供互联网接入业务、信息业务和增值业务的电信运营商。住宅IP&#xff0c;也称为家庭IP&#xff0c;是指由ISP分配给家庭或个人用户的IP地址。这些IP地址是真实的&#x…

远程仓库——GitHub

远程仓库——GitHub 一、在GitHub创建远程仓库二、在GitHub上添加密钥三、克隆远程仓库的代码到本地四、如何将本地仓库第一次同步到Github五、总结1.常用命令总结 注意&#xff1a;本文主要讲解的是&#xff0c;如何快速的将本地仓库的代码托管到GitHub上&#xff0c;如果不知…

物联网五层架构:每一层都扮演着不可或缺的角色——青创智通

物联网五层架构涵盖了感知层、网络层、数据层、应用层和业务层&#xff0c;每一层都扮演着不可或缺的角色&#xff0c;共同构成了物联网的完整生态系统。下面我们将详细探讨这五层架构的功能和特点。 首先&#xff0c;感知层是物联网的起点&#xff0c;负责获取和识别各种物理世…

手把手教数据结构与算法:优先级队列(银行排队问题)

队列 基本概念 队列的定义 队列&#xff08;Queue&#xff09;&#xff1a;队列是一种常见的数据结构&#xff0c;遵循先进先出&#xff08;First-In-First-Out, FIFO&#xff09;的原则。在队列中&#xff0c;元素按照进入队列的顺序排列。队列是一个线性的数据结构&#x…

低功耗数字IC后端设计实现典型案例| UPF Flow如何避免工具乱用Always On Buffer?

下图所示为咱们社区低功耗四核A7 Top Hierarchical Flow后端训练营中的一个案例&#xff0c;设计中存在若干个Power Domain&#xff0c;其中Power Domain2(简称PD2)为default Top Domain&#xff0c;Power Domain1&#xff08;简称PD1&#xff09;为一个需要power off的domain&…

SpringBoot的旅游网站的设计与实现 - 源码免费(私信领取)

1. 研究目的 本项目旨在设计并实现一个基于Spring Boot的旅游网站&#xff0c;为用户提供便捷的旅游信息查询、预订服务&#xff0c;以及旅游资讯分享功能&#xff0c;提升用户旅游体验。 2. 研究要求 a. 需求分析 通过市场调研和用户需求分析&#xff0c;了解用户对旅游网…

C语言(操作符)1

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…

vue3、element-plus递归实现动态菜单

vue3、element-plus递归实现动态菜单 使用场景&#xff1a;动态菜单为什么使用递归递归在动态菜单中的实现 使用场景&#xff1a;动态菜单 动态菜单是指菜单项的数量和层次结构可能是动态的&#xff0c;通常来自后端或用户输入。这些菜单的特征包括&#xff1a; 多层嵌套&…

Redis---------实现短信登录业务

目录 基于Session的短信登录 ①首先看他的业务逻辑 ②进行代码逻辑处理 基于Redis的短信登录 ①首先看他的业务逻辑 ②进行代码逻辑处理 Controller&#xff1a; Service接口&#xff1a; Service实例&#xff1a; Mapper&#xff1a; 封装ThreadLocal线程的数据操作&#x…

上传jar到github仓库,作为maven依赖存储库

记录上传maven依赖包到github仓库问题 利用GitHubPackages作为依赖的存储库踩坑1 仓库地址问题踩坑2 Personal access tokens正确姿势一、创建一个普通仓库&#xff0c;比如我这里是fork的腾讯Shadow到本地。地址是&#xff1a;https://github.com/dhs964057117/Shadow二、生成…

开源博客项目Blog .NET Core源码学习(19:App.Hosting项目结构分析-7)

本文学习并分析App.Hosting项目中后台管理页面的主页面。如下图所示&#xff0c;开源博客项目的后台主页面采用layui预设类layui-icon-shrink-right设置样式&#xff0c;点击主页面中的菜单&#xff0c;其它页面采用弹框或者子页面形式显示在主页面的内容区域。   后台主页面…

【八股】UML 2的基础结构和上层结构

UML&#xff08;统一建模语言&#xff09;是一种广泛使用的建模语言&#xff0c;用于软件工程中的系统设计。UML 2是UML的一个重要版本&#xff0c;它扩展了原有的功能&#xff0c;提供了更加丰富和灵活的建模能力。UML 2的结构可以分为两部分&#xff1a;基础结构&#xff08;…

私域流量运营平台:助力企业实现用户转化与营销新突破

​在当今数字化时代&#xff0c;私域流量运营已成为企业营销的重要一环。私域流量运营平台&#xff0c;作为助力企业实现精准营销、提升用户转化的工具&#xff0c;正逐渐受到市场的青睐。本文将详细介绍私域流量运营平台的功能、特点、优势、适用场景及使用方法&#xff0c;帮…

【PyTorch与深度学习】1、PyTorch介绍与张量的创建

课程地址 最近做实验发现自己还是基础框架上掌握得不好&#xff0c;于是开始重学一遍PyTorch框架&#xff0c;这个是课程笔记 1. 张量Tensor 张量是一种特殊的数据结构&#xff0c;与数组和矩阵非常相似。在 PyTorch 中&#xff0c;我们使用张量对模型的输入和输出以及模型的…

Meta-Llama-3-8B-Instruct本地推理

Meta-Llama-3-8B-Instruct 本地推理 基础环境信息&#xff08;wsl2安装Ubuntu22.04 miniconda&#xff09; 使用miniconda搭建环境 (base) :~$ conda create --name pytorch212 python3.10 Retrieving notices: ...working... done Channels:- defaults Platform: linux-64 C…

git 的使用教程规范以及示例

1、安装Git&#xff1a;你可以访问Git官网来下载并安装Git。 2、初始化Git仓库&#xff1a; git init这条命令将在当前目录下创建一个新的Git仓库。如果目录已经是一个仓库&#xff0c;它不会覆盖现有的内容。3、 克隆Git仓库&#xff1a; git clone <url>这条命令将克隆…