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

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

相关推荐
zjxtxdy几秒前
C语言(续)
c语言·开发语言
无尽的沉默4 分钟前
Thymeleaf 基本语法和表达式
java·开发语言
Coder_Boy_12 分钟前
Java后端核心技术体系全解析(个人总结)
java·开发语言·spring boot·分布式·spring cloud·中间件
zh_xuan14 分钟前
kotlin Flow的用法2
android·开发语言·kotlin·协程·flow·被压
南部余额18 分钟前
函数式接口 Lambda 表达式好搭档:Predicate、Function、Consumer、Supplier
java·开发语言·consumer·lambda·function·predicate·supplier
遨游xyz30 分钟前
Trie树(字典树)
开发语言·python·mysql
Java后端的Ai之路30 分钟前
【JDK】-JDK 17 新特性整理(比较全)
java·开发语言·后端·jdk17
郝学胜-神的一滴30 分钟前
Effective Modern C++ 条款40:深入理解 Atomic 与 Volatile 的多线程语义
开发语言·c++·学习·算法·设计模式·架构
小小小米粒34 分钟前
Spring Boot Starter ,不止是 “打包好配置的工具类包”
java·开发语言
a11177642 分钟前
星球主题个人主页(纯HTML 开源)
前端·html