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

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

相关推荐
一水鉴天2 分钟前
整体设计 定稿 之22 dashboard.html 增加三层次动态记录体系仪表盘 之1
前端·html
曼巴UE58 分钟前
UE C++ 字符串的操作
java·开发语言·c++
天天进步201513 分钟前
Linux 实战:如何像查看文件一样“实时监控” System V 共享内存?
开发语言·c++·算法
凛_Lin~~15 分钟前
安卓/Java语言基础八股文
java·开发语言·安卓
八年。。17 分钟前
Python 版本确认方法
开发语言·笔记·python
foundbug99919 分钟前
基于MATLAB Simulink的双向DC-DC变换器仿真程序实现
开发语言·matlab
张拭心22 分钟前
程序员越想创业,越不要急着动手
前端·人工智能
舒一笑24 分钟前
在低配云服务器上实现自动化部署:Drone CI + Gitee Webhook 的轻量级实践
前端·后端·程序员
龙国浪子27 分钟前
从零到一:打造专业级小说地图设计工具的技术实践
前端·electron
元亓亓亓29 分钟前
考研408--操作系统--day8--操作系统--虚拟内存&请求分页&页面置换/分配
android·java·开发语言·虚拟内存