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

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

相关推荐
2301_7973122612 小时前
学习java37天
开发语言·python
xifangge202512 小时前
PHP 接口跨域调试完整解决方案附源码(从 0 到定位问题)
开发语言·php
程序员爱钓鱼12 小时前
Node.js 编程实战:测试与调试 —— 日志与监控方案
前端·后端·node.js
go_bai12 小时前
Linux-网络基础
linux·开发语言·网络·笔记·学习方法·笔记总结
Mapmost12 小时前
数字孪生项目效率翻倍!AI技术实测与场景验证实录
前端
小酒星小杜12 小时前
在AI时代,技术人应该每天都要花两小时来构建一个自身的构建系统-Input篇
前端·程序员·架构
好大哥呀12 小时前
C++ IDE
开发语言·c++·ide
Cache技术分享13 小时前
290. Java Stream API - 从文本文件的行创建 Stream
前端·后端
陈_杨13 小时前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP--ArkTS 卡片开发完全指南
前端·harmonyos
BHXDML13 小时前
JVM 深度理解 —— 程序的底层运行逻辑
java·开发语言·jvm