JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath

简介: JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath

js代码,鼠标在页面点击时,记录元素的Xpath

代码:

function mouse_down(event){   
    var x = event.clientX, y = event.clientY
    var element = document.elementFromPoint(x, y)
     if (!element) {
     console.log("error: no element")
    } 
     console.log(readXPath(element))
}
function readXPath(element) {   
    count = 1
    result = ""
    while (true){
        count += 1
        if(count>99){
            break
        }
        if (element == document.body){
            console.log('/html/body/' + result)
            break
        }
        else
        {
            tag_index = 0
            tmp = element.parentElement
            for(var i=0;i<tmp.childElementCount;i++){
                if (tmp.children[i].tagName == element.tagName){
                    tag_index += 1
                }
                if (element == tmp.children[i]){                    
                    result = element.tagName.toLowerCase() + "[" + String(tag_index) + "]" + "/" +result
                    // console.log(result)
                    break
                }
            }
            element = tmp
        }
    }
}
document.onmousedown = mouse_down

 

目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
29天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
1月前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
95 10
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
42 4
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
1月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
2月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
26 0
|
JavaScript 前端开发
JavaScript 创建元素的三种方式
JavaScript 创建元素的三种方式
217 0