mirror of
https://github.com/NaiboWang/EasySpider.git
synced 2025-04-23 04:34:22 +08:00
84 lines
2.9 KiB
JavaScript
84 lines
2.9 KiB
JavaScript
function readXPath(element) {
|
||
if (element.id !== "") {//判断id属性，如果这个元素有id，则显 示//*[@id="xPath"] 形式内容
|
||
return '//*[@id=\"' + element.id + '\"]';
|
||
}
|
||
//这里需要需要主要字符串转译问题，可参考js 动态生成html时字符串和变量转译（注意引号的作用）
|
||
if (element == document.body) {//递归到body处，结束递归
|
||
return '/html/' + element.tagName.toLowerCase();
|
||
}
|
||
var ix = 1,//在nodelist中的位置，且每次点击初始化
|
||
siblings = element.parentNode.childNodes;//同级的子元素
|
||
|
||
for (var i = 0, l = siblings.length; i < l; i++) {
|
||
var sibling = siblings[i];
|
||
//如果这个元素是siblings数组中的元素，则执行递归操作
|
||
if (sibling == element) {
|
||
return arguments.callee(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix) + ']';
|
||
//如果不符合，判断是否是element元素，并且是否是相同元素，如果是相同的就开始累加
|
||
} else if (sibling.nodeType == 1 && sibling.tagName == element.tagName) {
|
||
ix++;
|
||
}
|
||
}
|
||
};
|
||
|
||
|
||
|
||
|
||
|
||
var nodeList = [];
|
||
NowNode = null;
|
||
var xnode = null;
|
||
var style = ""; //记录上个元素的颜色
|
||
document.addEventListener("mousemove", function () {
|
||
oe = document.elementFromPoint(event.x, event.y);
|
||
NowNode = oe;
|
||
console.log(oe);
|
||
if (xnode == null) {
|
||
xnode = oe;
|
||
}
|
||
if (xnode != oe) {
|
||
xnode.style.backgroundColor = style; //上个元素改回原来元素的背景颜色
|
||
style = oe.style.backgroundColor;
|
||
exist = 0;
|
||
for (o of nodeList) {
|
||
if (o["node"] == oe) {
|
||
exist = 1;
|
||
break;
|
||
}
|
||
}
|
||
if (exist == 1) {
|
||
}
|
||
else {
|
||
|
||
oe.style.backgroundColor = '#DDDDFF'; //设置新元素的背景元素
|
||
}
|
||
xnode = oe;
|
||
}
|
||
//对于可点击元素，屏蔽点击事件
|
||
if (oe.style.cursor == "pointer" || oe.tagName == "A" || oe.tagName == "BUTTON" || oe.tagName == "INPUT" || oe.onclick) {
|
||
oe.setAttribute("disabled", true);
|
||
}
|
||
});
|
||
document.addEventListener("click", function () {
|
||
nodeList.push({ node: NowNode, bgcolor: style, xpath: readXPath(NowNode) });
|
||
NowNode.style.backgroundColor = "#80FFFF";
|
||
style = "#80FFFF";
|
||
console.log(nodeList);
|
||
//对于可点击元素，屏蔽a标签默认点击事件
|
||
event.stopImmediatePropagation();
|
||
event.stopPropagation();
|
||
event.preventDefault ? event.preventDefault() : event.returnValue = false;
|
||
});
|
||
//清除选择项
|
||
function clear() {
|
||
//如果最后停留的元素被选中，则调整此元素的style为原始style，否则不进行调整
|
||
for (node of nodeList) {
|
||
node["node"].style.backgroundColor = node["bgcolor"];
|
||
if (NowNode == node["node"]) {
|
||
style = node["bgcolor"];
|
||
}
|
||
}
|
||
nodeList.splice(0, nodeList.length); //清空数组
|
||
}
|
||
|