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

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

相关推荐
踩着两条虫4 分钟前
VTJ:DSL语言规范
前端·低代码·ai编程
广州华水科技7 分钟前
单北斗GNSS在水库形变监测中的应用与优势分析
前端
Xiu Yan18 分钟前
Java 转 C++ 系列:函数对象、谓词和内建函数对象
java·开发语言·c++
洲星河ZXH20 分钟前
JavaWeb,前端工程化
前端
Full Stack Developme21 分钟前
Hutool StrUtil 教程
开发语言·网络·python
代码羊羊21 分钟前
Rust方法速览:从self到impl
开发语言·后端·rust
子兮曰22 分钟前
独立开发者主流技术栈(2026最新)
前端·后端·全栈
踩着两条虫30 分钟前
VTJ.PRO 新手入门:从环境搭建到 AI 生成首个 Vue3 应用
前端·javascript·数据库·vue.js·人工智能·低代码
十有八七32 分钟前
Resume Agent P1 开发 — 记忆管理 + 用户配置 + 工具系统
前端·后端
他是龙55140 分钟前
63:JS 加密断点调试与逆向实战
开发语言·javascript·状态模式