js用xpath定位获取元素

一、获取单个元素1、html<html><head><meta charset="utf-8"><script src="test.js"></script></head><body><select style="width: 100%;"><option value="0">-</o

Antg

27972人浏览 · 2020-08-03 15:18:47

Antg · 2020-08-03 15:18:47 发布

一、获取单个元素

1、html

<html>
    <head>
        <meta charset="utf-8">
		<script src="test.js"></script>
    </head>
    <body>
        <select style="width: 100%;">
            <option value="0"></option>
            <option value="1">张三</option>
            <option value="2">李四</option>
            <option value="3">王五</option>
            <option value="4">刘六</option>
        </select>
        <button type="button"  id="a" style="width: 100px; height: 50px;background-color: #eee;">点击</button>
		 
    </body>
 
</html>

2、js

//DOM加载时加载testXpath
addLoadEvent(testXpath)
//测试Xpath
function testXpath(){
	document.evaluate("/html/body/button",document).iterateNext().onclick = function(){
		var element = document.evaluate("/html/body/select",document).iterateNext();//获取到select元素
		var index = element.selectedIndex;//获取元素下标
		console.log(element.options[index].text)

	}
}
//文档加载函数
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
      }
    }
}

3、js的优化

将xpath封装，使用更加方便

//DOM加载时加载testXpath
addLoadEvent(testXpath)
//测试Xpath
function testXpath(){
		getElementByXpath("/html/body/button").onclick = function(){
		var element = getElementByXpath("/html/body/select");//获取到select元素
		var index = element.selectedIndex;//获取元素下标
		console.log(element.options[index].text);
	}
}
//文档加载函数
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
      }
    }
}
//封装xpath
function getElementByXpath(xpath){
	var element = document.evaluate(xpath,document).iterateNext();
	return element;
}

二、如何获取xpath

1、打开元素所在的网页
2、打开开发者模式（F12）
3、点击这个小箭头选中你要定位的元素
4、在这里右键——》copy——》copy xpath

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport