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

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

相关推荐
hh随便起个名5 小时前
力扣二叉树的三种遍历
javascript·数据结构·算法·leetcode
小浣熊熊熊熊熊熊熊丶5 小时前
《Effective Java》第25条:限制源文件为单个顶级类
java·开发语言·effective java
啃火龙果的兔子5 小时前
JDK 安装配置
java·开发语言
星哥说事5 小时前
应用程序监控:Java 与 Web 应用的实践
java·开发语言
我是小路路呀6 小时前
element级联选择器:已选中一个二级节点,随后又点击了一个一级节点(仅浏览,未确认选择),此时下拉框失去焦点并关闭
javascript·vue.js·elementui
程序员爱钓鱼6 小时前
Node.js 编程实战:文件读写操作
前端·后端·node.js
PineappleCoder6 小时前
工程化必备!SVG 雪碧图的最佳实践:ID 引用 + 缓存友好,无需手动算坐标
前端·性能优化
等....6 小时前
Miniconda使用
开发语言·python
zfj3216 小时前
go为什么设计成源码依赖,而不是二进制依赖
开发语言·后端·golang
醇氧6 小时前
org.jetbrains.annotations的@Nullable 学习
java·开发语言·学习·intellij-idea