js通过xpath定位元素并且操作元素以下拉框select为例

js也可以使用xpath定位元素,现在实例讲解。

页面上有一个下拉框,里面内容有三个,用F12看一下

一、使用xpath定位这个下拉框select

javascript 复制代码
el=document.evaluate('//select[@name="shoppingPreference"]', document).iterateNext()

二、为下拉框选择指定内容,比如想选择Men's,也就是第1个option(因为从0开始计算)

javascript 复制代码
el.options[1].selected = true

三、触发事件函数,使用它才能在网页上看到变化

javascript 复制代码
function fireEvent(element, event) {
                if (document.createEventObject) {
                    var evt = document.createEventObject();
                    return element.fireEvent('on' + event, evt)
                } else {
                    var evt = document.createEvent("HTMLEvents");
                    evt.initEvent(event, true, true)
                    return !element.dispatchEvent(evt);
                }
            }

四、使用触发函数,改变下拉框的页面显示内容

javascript 复制代码
fireEvent(el, "change")

运行完毕后,看页面已经发生变化。

相关推荐
漏刻有时17 分钟前
数据可视化Three.js 3D 地图实战:单文件原生实现省域区县拉伸建模
前端
会说话的番茄24 分钟前
AI 满嘴跑火车怎么办?给它配个"小抄"
前端·aigc
计算机魔术师25 分钟前
AI 权力集中辩论实录:从「token 工厂」到「唯一幸存者」
前端
灵析表格30 分钟前
灵析表格财务函数深度实用性分析与实操教程
开发语言·ai·json·excel·wps
eric-sjq30 分钟前
WanlyFrontend 中文声明式前端语言完全指南:让 0.6B 模型写出漂亮网页
前端
Full Stack Developme34 分钟前
跨站请求伪造 (CSRF) 是什么 设计及工作原理
前端·okhttp·csrf
SendTomo38 分钟前
WebRTC文件互传工具实测对比
javascript·网络·webrtc·html5·p2p
MoSTChillax42 分钟前
UI规范设计:从视觉到交互的全面指南
前端·ui·产品经理·设计规范·vibecoding
LONGZETECH1 小时前
无人机组装调试实训高损耗痛点分析与虚拟仿真教学落地方案
c语言·开发语言·架构·无人机
雪碧聊技术1 小时前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略