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")

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

相关推荐
颜进强1 分钟前
04 - 一张图看懂 OpenSpec 变更的一生:从创建到归档
前端·后端·ai编程
the_answer6 分钟前
JS 垃圾回收机制
前端
小KK_6 分钟前
JS 事件循环从小白视角入门:宏任务、微任务与 async/await 一网打尽
前端·javascript
aloha_15 分钟前
Linux服务器上指定目录的文件下载
前端
萧瑟余晖37 分钟前
Java深入解析篇三十六之分布式系统详解
java·开发语言·分布式
ZJU_统一阿萨姆1 小时前
【推理优化进阶】调度器的数学内核:排队论、SLO 与在线决策
开发语言·人工智能·语言模型·系统架构·vllm
szp20051 小时前
为了在浏览器里跑多线程 ONNX 推理,我把自己的支付浮层弄挂了
前端·webassembly
kisshyshy2 小时前
从 useRef 到 Web Worker:理解 React 可变对象与浏览器多线程
前端·javascript·react.js
fatcoder2 小时前
玩转Nginx 04 — 反向代理:给 nginx 接上后端
前端·后端·nginx
SomeB1oody2 小时前
【RustyML入门】5.2. 分类指标
开发语言·后端·机器学习·rust·教程