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

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

相关推荐
小小的木头人14 分钟前
Python 批量解析 Excel 经纬度,调用高德地图 API 获取中文地址
开发语言·python·excel
程序员黑豆35 分钟前
从零开始:创建第一个鸿蒙应用程序
前端·harmonyos
只与明月听1 小时前
LangChain 学习-掌握LangChain Core API
前端·人工智能·后端
Listen·Rain1 小时前
Vue3中组件间通信详解
前端·javascript·vue.js
Listen·Rain1 小时前
Vue3中customRef详解
前端·javascript·vue.js
nzz_1712141 小时前
PHP程序员转型AI岗位指南:核心技能、北京就业市场与转型路径分析
开发语言·人工智能·php
sugar__salt1 小时前
Document 切割:RAG 知识库数据预处理实战
javascript·langchain·embedding·js·rag·cheerio
Risehuxyc1 小时前
C# 将doc转换为docx
开发语言·c#·xhtml
小粉粉hhh1 小时前
React(三)——Redux
前端·javascript·react.js
易知微EasyV数据可视化2 小时前
定制化3D组件开发:打造差异化孪生体验
前端·人工智能·经验分享·数字孪生