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}`)
})

js生成xpath

原文：https://www.cnblogs.com/yloved/p/13964756.html