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

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

相关推荐
小陈的进阶之路几秒前
爬虫三大解析库:lxml, jsonpath, bs4
开发语言·笔记·python
wuyk5553 分钟前
第1章:无刷电机核心原理与运行机制
c语言·开发语言·stm32·单片机·嵌入式硬件·机器学习
瑞码空间5 分钟前
Routing & API:前后端协作的本质与实现
前端·后端·接口·路由
SomeB1oody6 分钟前
【RustyML入门】2.10. 主成分分析
开发语言·后端·机器学习·rust·教程
不好听6137 分钟前
React 的 useRef vs useState:响应式与非响应式的分界线
前端·react.js
我真是泰库辣9 分钟前
用TraeWork制作应用 —— 从 0 到 1 · 手把手搭建 opencode 网页对话网关
前端·后端
xiaominlaopodaren13 分钟前
three.js地图数学基础(二):Web Mercator
javascript·gis·three.js
2603_9651481116 分钟前
抖音/快手直播选品:用API快速匹配爆款与低价货源
开发语言·python·自动化·api
谷哥的小弟16 分钟前
TypeScript接口
javascript·typescript
RobinDevNotes18 分钟前
轻量级动画引擎Anime.js迎来V4大版本更新
开发语言·前端·javascript·ecmascript·动画·c4前端