1，收集用户在页面中的所有click行为，并使用log方法发送日志，包含触发事件的节点xpath信息
2，xpath需包含tagName、id、class、同级同名节点索引(从1开始)，如
<body>
<div id=“container”>
<p>something</p>
<a id=“link1” class=“link-class”></a>
<a id=“link2” class=“link-class current”>target link</a>
</div>
</body>
点击target link时，xpath为 body[1]/div[1][@id=“container”]/a[2][@id=“link2”][contains(@class, “link-class")][contains(@class, “current")]
3，不侵入、不影响其他业务代码的执行
// 遍历深度树形结构
var obody = document.getElementsByTagName('body')[0];
obody.addEventListener('click', function (e) {
console.log(getXPath(e.target));
})
function getXPath(target) {
if (target.nodeName == 'BODY') return 'body[1]';
var index = 1;
var str = '';
var tempTarget = target;
var nodeName = target.nodeName;
var id = target.id;
var classList = target.classList;
// 这是在前面一个才可以，如果前面不是一样的标签，再前面有就不可以了
// while (tempTarget.previousElementSilbling != null && tempTarget.previousElementSilbling.nodeName == nodeName) {
// index++;
// // 当前一个节点存在且和自己是同一个标签，index++
// // 然后把target转到前面的标签（即计算有多少个相同的标签）
// tempTarget = tempTarget.previousElementSilbling;
// }
// 当前面有兄弟节点时，就可以往前
while(tempTarget.previousElementSibling!=null)
{
//如果前一个节点的node和要找的nodeName一样则index++，把target赋予前一个点
if(tempTarget.previousElementSibling.nodeName == nodeName)
{
index++;
console.log(index);
}
// 无论前面的标签是否和自身一样，但是一直往前，比较是否和自身的nodeName一样
tempTarget = tempTarget.previousElementSibling;
}
// 然后就str就是所在的位置
str = '/' + nodeName.toLowerCase() + '[' + index + '][@id="' + id + '"]';
classList.forEach(function (ele, index, self) {
str += '[contains(@class,"' + ele + '")]';
})
return getXPath(target.parentNode) + str;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<div id="“container”">
<p id="ypu" class="link-class current">something</p>
<a id="“link1”" class="“link-class”"></a>
<a id="“link2”" class="“link-class" current”>target link</a>
</div>
<script>
window.onload = function () {
let body = document.body;
body.addEventListener("click", function (event) {
const rz = fetchDetail(event.target);
console.lo***击了", rz);
});
function fetchAttribute(element) {
let rz = "";
let id = element.id,
classes = element.className;
id ? (rz += `[@id="${id}"]`) : null;
if (classes) {
classes = classes.split(" ");
classes = classes.map((classes) => {
return `[contains(@class,"${classes}")]`;
});
rz += classes.join(",");
}
return rz;
}
function fetchDetail(element) {
let rz = "";
let parent = element.parentElement;
if (parent && parent.tagName.toLowerCase() !== "html") {
if (parent.childNodes) {
let elementIndex;
let childArr = [...parent.childNodes].filter((node) => {
return node.tagName;
});
childArr.map((node, index) => {
if (node === element) {
elementIndex = index + 1;
}
});
rz += `${element.tagName.toLowerCase()}[${elementIndex}]`;
rz += fetchAttribute(element);
return parent.parentElement
? fetchDetail(parent.parentElement) + rz
: rz;
}
} else {
return `${element.tagName.toLowerCase()}[1]${fetchAttribute(
element
)}`;
}
}
};
</script>
</body>
</html>
(function(){
var body = document.body;
body.addEventListener('click', function(e){
var xpath = ''
var parent = e.target.parentNode
var ele = e.target
getBase(ele, parent) // 给每个节点添加一个index属性
var index = e.target.index
var parentArr = getParent(ele, [])
// 取出最后两个dom节点，因为是html和document，这里并用不到
// 翻转过来，让父级在前
parentArr = parentArr.slice(0, parentArr.length - 2).reverse()
for(let i = 0; i < parentArr.length; i++){
let index = `[${parentArr[i].index}]`
let classStr = getClassStr(parentArr[i])
let idStr = getIdStr(parentArr[i])
xpath = xpath + parentArr[i].tagName.toLocaleLowerCase() + index + idStr + classStr
}
// 这里也可以单独封装一个函数，我就懒得弄了
let domClassStr = getClassStr(ele)
let domIdStr = getIdStr(ele)
let domIndex = `[${ele.index}]`
let domName = ele.tagName.toLocaleLowerCase() + domIndex
xpath = xpath + domName + domIdStr + domClassStr
console.log(xpath)
}, false)
// 获取id组合的字符串
function getIdStr(ele){
let id = ele.id
if(!id) return ''
return `[@id="${id}"]`
}
// 获取class组合的字符串
function getClassStr(ele){
let classList = Array.from(ele.classList)
if(!classList) return ''
let str = ''
for(let i = 0; i < classList.length; i++){
let val = `[contains(@class, "${classList[i]}")]`
str += val
}
return str
}
// 获取当前点击dom的所有父级
function getParent(ele, arr){
var father = ele.parentNode
getBase(ele, father)
arr.push(father)
if(father.parentNode){
getParent(father, arr)
}
return arr
}
// 给每一个同级dom都添加一个index属性
function getBase(tag, parent){
let children = Array.from(parent.children)
for(let i = 0; i < children.length; i++){
if(children[i].tagName != tag.tagName){
children.splice(i, 1)
i--
}else{
children[i].index = i + 1
}
}
}
})() 
document.body.onclick = function(e) {
let res = []; //用于存放每一级节点拼接成的字符串
function getXPath(curr) {
if (curr === document.body) {
res.unshift('body[1]');
return;
};
let index = 1, part = ''; //part用于保存当前节点拼接出的字符串
let bros = curr.parentNode.children;
for (let k = 0; k < bros.length; k++) { //找出当前节点在同级同名节点中的索引
if (bros[k] === curr) break;
if (bros[k].tagName == curr.tagName) index++;
};
//开始拼接字符串，标签名、索引、id、class
part += `${curr.tagName.toLowerCase()}[${index}]`;
if (curr.id !== '') {
part += `[@id="${curr.id}"]`;
};
if (curr.classList.length != 0) {
for (let m = 0; m < curr.classList.length; m++) {
part += `[contains(@class, "${curr.classList[m]}")]`;
}
};
res.unshift(part); //将拼接好的字符串插入res数组的头部
getXPath(curr.parentNode); //向节点的父级递归
};
getXPath(e.target);
console.log(res.join('/')); //将各个字符串以"/"连接并输出
};
扫描二维码，关注牛客网
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
京公网安备
11010502036488号
