js生成xpath
阿新 • • 發佈:2020-11-12
js生成xpath
yls 2020/11/12
class XpathGenerater { /** * 生成給定節點對應的全路徑xpath * @param {節點} el */ generateFullXPath(el) { let query = "" while (el && el.nodeType === Node.ELEMENT_NODE) { // 也可以使用nodeName,nodeName包含了tagName let component = el.tagName.toLowerCase() let index = this.getElementIndex(el) if (index >= 1) { component += '[' + index + ']' } query = '/' + component + query el = el.parentNode } return query } /** * 獲取當前元素節點在上一級節點中的位置 * 若沒有相同型別的兄弟節點,返回0 */ getElementIndex(el) { let index = 1 let sib = el.previousSibling while (sib) { if (sib.nodeType === Node.ELEMENT_NODE && this.compareTagNameEqual(el, sib)) { index++ } sib = sib.previousSibling } if (index > 1) return index sib = el.nextSibling while (sib) { if (sib.nodeType === Node.ELEMENT_NODE && this.compareTagNameEqual(el, sib)) { return 1 } sib = sib.nextSibling } return 0; }; /** * 檢視兩個元素節點名稱是否相同 */ compareTagNameEqual(primaryEl, siblingEl) { let p = primaryEl, s = siblingEl // return (p.tagName === s.tagName && (!p.id || p.id === s.id)); return (p.tagName === s.tagName) }; }
使用舉例
點選頁面某一處,生成該處對應的xpath
document.addEventListener("click", function (event) { //todo 點選頁面時,可以通過加樣式改變顏色,也可以加遮罩層 //event.target.style.background = "rgba(213, 0, 0, 0.2)" //event.target.style.outline = "rgb(199, 0, 0) solid 2px" let xpath = new XpathGenerater().generateFullXPath(event.target) console.log(`xpath==========${xpath}`) })