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

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

相关推荐
玩电脑的辣条哥几秒前
幽灵回复AI已回复但前端不显示的排查与修复
前端·人工智能
xb113210 分钟前
C#生产者-消费者模式
开发语言·c#
电商API&Tina11 分钟前
乐天平台 (Rakuten) 数据采集指南
大数据·开发语言·数据库·oracle·json
石去皿14 分钟前
轻量级 Web 应用 —— 把一堆图片按指定频率直接拼成视频,零特效、零依赖、零命令行
前端·音视频
zhougl99628 分钟前
Java内部类详解
java·开发语言
Grassto29 分钟前
11 Go Module 缓存机制详解
开发语言·缓存·golang·go·go module
代码游侠39 分钟前
学习笔记——Linux内核与嵌入式开发3
开发语言·arm开发·c++·学习
星夜落月1 小时前
Web-Check部署全攻略:打造个人网站监控与分析中心
运维·前端·网络
摘星编程1 小时前
OpenHarmony + RN:ProgressBar进度条组件
javascript·react native·react.js
怎么没有名字注册了啊1 小时前
C++ 进制转换
开发语言·c++