当前位置: 首页 > news >正文

【JavaScript】根据元素内容遍历元素的方案

▒ 目录 ▒

    • 🛫 导读
      • 需求
    • 1️⃣ jQuery
    • 2️⃣ XPATH(document.evaluate)
    • 3️⃣ 原生js(querySelectorAll & Array)
    • 🛬 文章小结
    • 📖 参考资料

🛫 导读

需求

因业务需要,根据元素的文本内容,删选出来想要的元素。以bing.com为例,找到带国际版的元素:
在这里插入图片描述

其中,元素对应html如下:
在这里插入图片描述

1️⃣ jQuery

jQuery作为老牌强大的js库,提供了丰富的元素查询接口,也包含了根据元素内容定位元素的功能。

  1. 引入jQuery。bing.com没有引入该库,我们需要手动执行该库,打开任意版本的jquery(小编使用的是jquery-2.0.0.min.js),复制所有代码,在控制台中执行即可。
    在这里插入图片描述
  1. 执行jQuery函数定位元素:jQuery( "div:contains(国际版)" )
    在这里插入图片描述
    由于页面中包含了大量的div对象,所以返回结果中除了目标元素(第五项)以外,目标元素的任意父元素,只要是div,都会被搜索到。
    因为:contains()只判断是否含有目标字符串,而不是全等。
    在这里插入图片描述

2️⃣ XPATH(document.evaluate)

XPATH,内置了一些函数,可以方便的处理文本。操作流程如下:

  • document.evaluate执行xpath,获取XPathResult。
  • .iterateNext()遍历结果。
    可以直接获取到目标,效果如下:
    在这里插入图片描述

代码如下:

var headings = document.evaluate("//div[contains(text(), '国际版')]", document, null, XPathResult.ANY_TYPE, null );
let thisHeading;
while(thisHeading = headings.iterateNext()){// thisHeading contains matched nodeconsole.log(thisHeading)
}

3️⃣ 原生js(querySelectorAll & Array)

最优雅的实现,直接使用原生js:

  1. document.querySelectorAll删选目标列表
  2. Array.from将目标列表转换为数组
  3. Array.filter将目标数组过滤,生成最终的目标数组
  4. 对命中目标执行Array.forEach,遍历元素执行响应的操作

代码如下:

    Array.from(document.querySelectorAll('div')).filter(el => el.textContent==='国际版').forEach(el => el.click());

🛬 文章小结

本文中提到的三种方案,各有优劣。
不过原生js方案,通过Array的各种方法,将代码通过链式调用,已经很优雅了;而且通过箭头函数自定义过滤条件,非常的灵活,值得推荐。

基础就是王道,灵活运用js基础,一样可以优雅高效的实现各种任务。

📖 参考资料

  • :contains()选择子文档: https://api.jquery.com/contains-selector/
  • Javascript .querySelector find by innerTEXT https://errorsandanswers.com/javascript-queryselector-find-by-innertext/

**ps:**文章中内容仅用于技术交流,请勿用于违规违法行为。

相关文章:

【JavaScript】根据元素内容遍历元素的方案

▒ 目录 ▒🛫 导读需求1️⃣ jQuery2️⃣ XPATH(document.evaluate)3️⃣ 原生js(querySelectorAll & Array)🛬 文章小结📖 参考资料🛫 导读 需求 因业务需要,根据元…...

kafka全解

目录Kafka概述定义消息队列目录结构分析传统消息队列的应用场景消息队列的两种模式点对点模式发布/订阅模式Kafka基础架构Kafka快速入门安装部署集群规划集群部署集群启停脚本Kafka命令行操作Kafka基础架构主题命令行操作生产者命令行操作消费者命令行操作kafka可视化工具Kafka…...

(三)随处可见的LED广告屏是怎么工作的呢?接入GUI

续上文,本篇我们将尝试接入一个GUI来控制点阵屏。在前两篇中,我们相继介绍了点阵屏的控制原理,以及如何让点阵屏按照我们所想的进行显示。本篇将在此基础上接入一个GUI,使点阵屏的控制更加优雅。限于阅读体验和展示效果&#xff0…...

线程池简介

线程池 线程池(英语:thread pool):一种线程使用模式。线程过多会带来调度开销,进而影响缓存局部性和整体性能。而线程池维护着多个线程,等待着监督管理者分配可并发执行的任务。这避免了在处理短时间任务时…...

大数据面试题集锦-Hadoop面试题(四)-YARN

你准备好面试了吗?这里有一些面试中可能会问到的问题以及相对应的答案。如果你需要更多的面试经验和面试题,关注一下"张飞的猪大数据分享"吧,公众号会不定时的分享相关的知识和资料。 文章目录1、为什么会产生 yarn,它解决了什么问题&#xf…...

Python---time模块

专栏:python 个人主页:HaiFan. 专栏简介:Python在学,希望能够得到各位的支持!!! time模块前言时间戳time.time()将时间戳转换成字符串time.ctime()将时间戳转换为元组time.localtime(时间戳)将元…...

坚鹏:学习贯彻二十大精神 解码共同富裕之道(面向银行)

学习贯彻二十大精神 解码共同富裕之道课程背景: 很多银行从业人员存在以下问题:不知道如何准确解读二十大精神?不清楚共同富裕相关政策要求?不知道如何有效推动共同富裕? 课程特色:有实战案例有…...

python查看程序的cpu和内存资源占用情况

1.获取线程消耗的内存 :线程内存使用的概念没有明确定义。线程共享它们的内存。唯一真正的线程本地内存是它的调用堆栈,除非您认真地递归地做一些事情,否则这不是有趣的部分。 2.获取进程消耗的内存 3.获取程序消耗的内存 mprof run endpoint.py 4.查看…...

番外10:使用ADS对射频功率放大器进行非线性测试2(使用带宽20MHz的64QAM信号进行ACLR、EVM、CCDF测试)

番外10:使用ADS对射频功率放大器进行非线性测试2(使用带宽20MHz的64QAM信号进行ACLR、EVM、CCDF测试) 1、基本理论 功率放大器的非线性性能十分重要,特别是对于当前广泛使用的移动设备。由于其各种复杂的信号调制,功…...

Ubuntu搭建maven私服

1.安装JDK8 已经是JDK8的需要配置环境变量,如果是更高版本的JDK则需要修改nexus配置文件 2.下载nexus安装包 百度网盘下载:链接:https://pan.baidu.com/s/1DfKqql8tZNQXEBxAEH7UyA 提取码:hx4p安装到有磁盘的目录如下所示&…...

【JavaWeb】Servlet基础

文章目录1.Tomcat服务器安装注意事项2.编写WebApp3.BS系统角色和协议4.模拟Servlet4.1模拟sun公司4.2模拟Tomcat服务器4.3模拟WebApp开发者5.开发一个带有Servlet的WebApp5.1创建一个名为crm的项目5.2 在项目中创建一个名为WEB-INF的文件(必须)5.3在WEB-…...

pinia + pinia-plugin-persistedstate + 组合式API 写法,持久化失效问题

持久化失效卡了一天的问题安装使用就不多说了,主要是针对持久化失效的几个问题说明和解决方法首先是组合式写法,配置持久化export const useUserStore defineStore(user, () > {},{persist: true} )defineStore 第三个参数,具体可以看 p…...

ptrace 调式详解

在程序出现bug的时候,最好的解决办法就是通过 GDB 调试程序,然后找到程序出现问题的地方。比如程序出现 段错误(内存地址不合法)时,就可以通过 GDB 找到程序哪里访问了不合法的内存地址而导致的。本文不是介绍GDB不是使…...

【AI绘画】绝美春天插画,人人都是插画师

春天,自然界重新苏醒,生机勃勃,百花争艳,万籁俱寂。一切都被新的生命活力所染上。春风拂面,一股清新的空气流过,仿佛带着一种神秘的力量,让人心旷神怡,心情舒畅、轻松愉悦。 突然&a…...

蓝桥杯入门即劝退(二十四)重复的子字符串(被秒杀)

欢迎关注点赞评论,共同学习,共同进步! ------持续更新蓝桥杯入门系列算法实例-------- 如果你也喜欢Java和算法,欢迎订阅专栏共同学习交流! 你的点赞、关注、评论、是我创作的动力! -------希望我的文章…...

针对序列级和词元级应用微调BERT(需修改)

对于序列级和词元级自然语言处理应用,BERT只需要最小的架构改变(额外的全连接层),如单个文本分类(例如,情感分析和测试语言可接受性)、文本对分类或回归(例如,自然语言推…...

(四十七)大白话表锁和行锁互相之间的关系以及互斥规则是什么呢?

今天我们接着讲,MySQL里是如何加表锁的。这个MySQL的表锁,其实是极为鸡肋的一个东西,几乎一般很少会用到,表锁分为两种,一种就是表锁,一种是表级的意向锁,我们分别来看看。 首先说表锁&#xf…...

织梦TXT批量导入TAG标签并自动匹配相关文章插件

织梦TXT批量导入TAG标签并自动匹配相关文章插件是一种非常有用的插件,它可以帮助网站管理员快速地将TAG标签添加到文章中,并自动匹配相关文章。 以下是该织梦TXT批量导入TAG标签插件的几个优点: 1、提高网站的SEO效果:TAG标签是搜…...

Sentinel架构篇 - 10分钟带你看滑动窗口算法的应用

限流算法 以固定时间窗口算法和滑动时间窗口算法为例,展开两种限流算法的分析。 固定时间窗口算法 在固定的时间窗口内,设置允许固定数量的请求进入。如果超过设定的阈值就拒绝请求或者排队。 具体的,按照时间划分为若干个时间窗口&#…...

redis主从复制

<1> redis主从复制介绍&#xff1a; 首先来介绍一下什么是redis主从复制 Redis是一个使用ANSI C编写的开源、支持网络、基于内存、可选持久性的键值对存储数据库。但如果当把数据存储在单个Redis的实例中&#xff0c;当读写体量比较大的时候&#xff0c;服务端就很难承受…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...