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

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

相关推荐
云浪几秒前
手把手教你用 fetch 读取 SSE 流,给 AI 聊天加上打字机效果
前端·javascript·vue.js
Csvn12 分钟前
Tailwind 动态拼接类名失效?JIT 引擎正在"静态分析"你
前端
Hanniel16 分钟前
Python描述符(下):内置机制揭秘
开发语言·python·机器学习
柳杉20 分钟前
我用Threejs 搓了一个 3D 中国地图设计器,开箱即用
前端·three.js·数据可视化
Cloud_Shy61821 分钟前
解读《Effective Python 3rd Edition》:从练气到老魔(第七章 Item 52 - 53)
开发语言·人工智能·笔记·python
DJ斯特拉22 分钟前
Tlias智能学习辅助系统(前端部分)
前端·javascript·学习
星恒随风22 分钟前
C++ string 类详解:常用接口、OJ 场景与模拟实现中的深浅拷贝
开发语言·c++·笔记·学习·状态模式
码云数智-大飞23 分钟前
Go Channel 详解:并发通信的正确姿势
前端·数据库·git
yyuuuzz26 分钟前
2026游戏云服务器推荐的技术判断思路
运维·服务器·开发语言·网络·人工智能·游戏·php