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

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

相关推荐
keyipatience19 分钟前
线程栈与TLS和线程互斥
java·linux·服务器·开发语言·ubuntu
我的xiaodoujiao23 分钟前
快速学习Python基础知识详细图文教程9--函数进阶
开发语言·python·学习·测试工具
爱喝水的鱼丶1 小时前
SAP-ABAP:ALV通用封装实践——搭建可复用的ALV开发工具类,减少80%重复代码
开发语言·性能优化·sap·abap·erp·alv
脱胎换骨-军哥1 小时前
C++/Rust无缝互操作:混合系统新常态
开发语言·c++·rust
songroom2 小时前
Kimi K3:Rust封装XTP接口详细教程实践
开发语言·后端·rust
瑞瑞小同学2 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
kebeiovo2 小时前
游戏服务端开发:Actor模型详解(Go语言)
开发语言·后端·golang
HexCIer2 小时前
面向未来的原子化 CSS:UnoCSS 核心架构分析与 Tailwind CSS 现状
前端·css·vite
迷途呀2 小时前
Python:函数中的参数类型
开发语言·笔记·python·langchain·nlp
程序员黑豆2 小时前
鸿蒙应用开发中的单位详解:px、vp、fp、lpx
前端·harmonyos