Js 可视化框选Dom元素，Xpath路径变更Dom元素

最新推荐文章于 2022-04-26 18:02:02 发布
最新推荐文章于 2022-04-26 18:02:02 发布
阅读量975 收藏 4
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37203082/article/details/120528666
版权

 应用于可视化埋点需求，需要一个JS能够通过框选 获取页面的DOM元素

且记录Xpath路径，用于后续对Dom进行后续的操作

简单做了Demo，后续继续优化

<!doctype html>
<html>
<head>
    <title>Js 可视化圈选Dom元素，Xpath路径变更Dom</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .drawDiv {
            position: absolute;
            background: #ccc;
        }


        .selBlue {
            border: 1px dashed blue !important;
        }


        .sel {
            margin: 30px auto;
            width: 960px;
            overflow: hidden
        }

        li {
            list-style: none;
            float: left;
            width: 60px;
            height: 20px;
        }

        .selColor {
            float: left
        }


        .xz {
            width: 340px;
            float: left;
        }

        #canvas {
            width: 960px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 0 auto
        }
    </style>
    <script>


        function del(){
            var xpath=document.getElementById("xPath").value;
            var doc=getElem(xpath);
            if(doc!=""){
                var classVal = doc.getAttribute("class");
                classVal=classVal.replace("selBlue");
                doc.setAttribute("class",classVal);
            }
        };


        function $Id(id) {
            return document.getElementById(id);
        }

        function getXPath(elm) {
            let allNodes = document.getElementsByTagName('*')
            for (var segs = []; elm && elm.nodeType == 1; elm = elm.parentNode) {
                if (elm.hasAttribute('id')) {
                    let uniqueIdCount = 0
                    for (var n = 0; n < allNodes.length; n++) {
                        if (allNodes[n].hasAttribute('id') && allNodes[n].id == elm.id) uniqueIdCount++;
                        if (uniqueIdCount > 1) break;
                    }
                    if (uniqueIdCount == 1) {
                        segs.unshift('//*[@id="' + elm.getAttribute('id') + '"]');
                        return segs.join('/');
                    } else {
                        return false
                    }
                } else {
                    for (var i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) {
                        if (sib.localName == elm.localName) i++;
                    }
                    if (i == 1) {
                        if (elm.nextElementSibling) {
                            if (elm.nextElementSibling.localName != elm.localName) {
                                segs.unshift(elm.localName.toLowerCase())
                            } else {
                                segs.unshift(elm.localName.toLowerCase() + '[' + i + ']');
                            }
                        } else {
                            segs.unshift(elm.localName.toLowerCase())
                        }
                    } else {
                        segs.unshift(elm.localName.toLowerCase() + '[' + i + ']');
                    }
                }
            }
            return segs.length ? '/' + segs.join('/') : null
        };

        function getElem(path) {
            try {
                var evaluator = new XPathEvaluator();
                var result = evaluator.evaluate(path, document.documentElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
                return result.singleNodeValue || '';
            } catch (e) {
                console.log(e)
                return ''
            }
        };



        window.onload = function () {
            var oCanvas = $Id('canvas');

            // var oRadius = $Id('radius');
            var aInputs = document.getElementsByTagName('input');
            var xz = 'none';
            var arr = [];
            for (var i = 0; i < aInputs.length; i++) {
                if (aInputs[i].type == 'checkbox') {
                    arr.push(aInputs[i]);
                }
            }
            for (var i = 0; i < arr.length; i++) {
                arr[i].onclick = function () {
                    if (!this.checked) {
                        this.checked = false;
                    } else {
                        for (var j = 0; j < arr.length; j++) {
                            arr[j].checked = false;
                        }
                        this.checked = true;
                        xz = this.value;
                    }
                }
            }

            document.onclick = function (ev) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].checked) {
                        arr[i].checked = true;
                        xz = arr[i].value;
                        if (xz != "none") {
                            return;
                        }
                    }
                }
                var x = ev.clientX;
                var y = ev.clientY;
                var delDocArr = document.elementsFromPoint(x, y);
                for (var delDoc of delDocArr) {
                    var classVal = delDoc.getAttribute("class");
                    //如果圈选的内容已经存在了，则跳过
                    if (classVal!=null && classVal.indexOf("selBlue")>=0) {
                        console.log(delDoc);
                        // alert("选择了删除，删除圈选内容：" + delDoc.id);
                        console.log("选择了删除，删除圈选内容：" + delDoc.id);
                        // delDoc.remove();
                        var selDivName = document.getElementById("selDivName");
                        selDivName.value = delDoc.id;
                        var xPath = getXPath(delDoc);
                        document.getElementById("xPath").value = xPath;
                    }
                }

            }

            oCanvas.onmousedown = function (ev) {
                if (oCanvas.setCapture) {
                    oCanvas.setCapture();
                }
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].checked) {
                        arr[i].checked = true;
                        xz = arr[i].value;
                        if (xz != "select") {
                            return;
                        }
                    }
                }
                var oEv = ev || window.event;
                var disX = oEv.clientX;
                var disY = oEv.clientY;
                var oR = document.createElement('div');
                // oR.id = "div";
                oR.className = "drawDiv"
                oR.style.top = disY + 'px';
                oR.style.left = disX + 'px';
                // oR.style.backgroundColor = color;
                oR.style.border = '1px dashed red';
                oR.style.backgroundColor = 'transparent';
                document.body.appendChild(oR);

                document.onmousemove = function (ev) {
                    if (oCanvas.setCapture) {
                        oCanvas.setCapture();
                    }
                    var oEv = ev || window.event;
                    var x = oEv.clientX;
                    var y = oEv.clientY;
                    if (x < oCanvas.offsetLeft) {
                        x = oCanvas.offsetLeft;
                    } else if (x > oCanvas.offsetLeft + oCanvas.offsetWidth) {
                        x = oCanvas.offsetLeft + oCanvas.offsetWidth
                    }
                    if (y < oCanvas.offsetTop) {
                        y = oCanvas.offsetTop;
                    } else if (y > oCanvas.offsetTop + oCanvas.offsetHeight) {
                        y = oCanvas.offsetTop + oCanvas.offsetHeight
                    }
                    oR.style.width = Math.abs(x - disX) + 'px';
                    oR.style.height = Math.abs(y - disY) + 'px';
                    oR.style.top = Math.min(disY, y) + 'px';
                    oR.style.left = Math.min(disX, x) + 'px';
                }

                document.onmouseup = function (ev) {
                    if (oCanvas.setCapture) {
                        oCanvas.setCapture();
                    }
                    var x = event.clientX;
                    var y = event.clientY;
                    var divx1 = oCanvas.offsetLeft;
                    var divy1 = oCanvas.offsetTop;
                    var divx2 = oCanvas.offsetLeft + oCanvas.offsetWidth;
                    var divy2 = oCanvas.offsetTop + oCanvas.offsetHeight;

                    if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
                        console.log("在外面");
                        // return;
                    } else {
                        console.log("在里面");
                        if (xz == 'select') {
                            document.onmousemove = null;
                            document.onmouseout = null;

                            var leftX = parseInt(oR.style.left.replace("px", ""));
                            var leftY = parseInt(oR.style.top.replace("px", ""));

                            var rightX = leftX + parseInt(oR.style.width.replace("px", ""));
                            var rightY = leftY + parseInt(oR.style.height.replace("px", ""));

                            console.log("左上角坐标点xy:" + leftX + "," + leftY);
                            console.log("右下角坐标点xy:" + rightX + "," + rightY);

                            // var cc=0;
                            var domArr = [];
                            outer:
                                for (var i = leftX; i <= rightX; i += 5) {
                                    for (var k = leftY; k <= rightY; k += 5) {
                                        var ddArr = document.elementsFromPoint(i, k);
                                        for (var add of ddArr) {
                                            // cc++;
                                            // console.log(cc)
                                            var dlx = parseInt(add.offsetLeft);
                                            var dly = parseInt(add.offsetTop);
                                            var dWidth = parseInt(add.offsetWidth);
                                            var dHight = parseInt(add.offsetHeight);
                                            var drx = dlx + dWidth;
                                            var dry = dly + dHight;
                                            if ( leftX<=dlx  &&  leftY <= dly && drx <= rightX && dry <= rightY) {
                                                if (domArr.indexOf(add) == -1 && add.className != "selBlue") {
                                                    // console.log("dl:"+dlx+","+dly+"--dr:"+drx+","+dry);
                                                    // console.log("ol:"+leftX+","+leftY+"--or:"+rightX+","+rightY);
                                                    var classVal = add.getAttribute("class");
                                                    //如果圈选的内容已经存在了，则跳过
                                                    if (classVal != null) {
                                                        if (classVal.indexOf("selBlue") >= 0) {
                                                            break outer;
                                                        }
                                                        classVal = classVal.concat(" selBlue");
                                                    } else {
                                                        classVal = "selBlue";
                                                    }
                                                    domArr.push(add);
                                                    console.log(add);
                                                    console.log("圈中的DIV:" + add.id);
                                                    alert("圈中的DIV:" + add.id);
                                                    add.setAttribute("class", classVal);

                                                    var selDivName = document.getElementById("selDivName");
                                                    selDivName.value = add.id;
                                                    var xPath = getXPath(add);
                                                    document.getElementById("xPath").value = xPath;
                                                    break outer;
                                                }
                                            }
                                        }
                                    }
                                    ;
                                };
                            // console.log(document.elementsFromPoint(ev.clientX, ev.clientY));
                            // console.log(domArr)
                            oR.remove();

                        }

                    }

                    if (oCanvas.releaseCapture) {
                        oCanvas.releaseCapture();
                    }
                }
                return false;
            }
        }
    </script>
</head>
<body>
<div class="sel">
    <span class="selColor">选择操作类型:</span>
    <p class="xz">
        <input type="checkbox" checked="checked" value="none" id="none"/>无操作
        <input type="checkbox" id="select" value="select"/>框选
        <!--        <input type="checkbox" id="del" value="select"/>删除-->
    </p>

</div>
<div id="canvas" style="float: left;margin-left: 10%">
    <div style="width: 30%;height: 40%;border: 1px solid red;float: left" id="div1"></div>

    <div style="width: 20%;height: 20%;margin-top: 25%;margin-left: 20% ;border: 1px solid black" id="div2">
        <div style="width: 20%;height: 20%;margin-top: 20px;margin-left: 20% ;border: 1px solid black" id="div3">
        </div>
    </div>
    <div style="width: 20%;height: 20%;margin-left: 60% ;border: 1px solid black" id="div4">
    </div>
</div>

<div style="width: 30%;height: 40%;border: 1px solid red;float: left;margin-left: 10px" id="divrg">
    选中的DIV <input type="text" value="" id="selDivName" style="width: 200px"/>
    <br>
    xPath路径 <input type="text" value="" id="xPath" style="width: 200px"/>
    <br>
    <button type="button" id="save">保存</button>
    <button type="button" id="del" onclick="del()">删除</button>
</div>

</body>
</html>

效果图

CJ点
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js框选功能（得到dom标签）
weixin_51410591的博客
04-12 193
【代码】js框选功能（得到dom标签）
JavaScript 技术篇-js通过xpath获取dom节点，js校验xpath唯一性
小蓝枣的博客
04-20 7511
document.evaluate()就是通过xpath获取dom节点。 返回的结果通过.iterateNext()可以获得dom对象，每次调用会少一个，当没有时就返回空。 JavaScript 技术篇-js通过xpath获取dom节点，js校验xpath唯一性。 document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
通过xpath查询xml中的节点并修改节点元素值
热门推荐
shen332401890的专栏
04-03 1万+
1.转换字符串到Document & 根据Xpath语法查找到指定节点并修改值 1 2 3 4 5 6 7 8 // 把xml格式的字符串转成Document Document doc = DocumentHelper.parseText(xmlString); // 使用xpath语
JAVA实现可视化的xpath_【Java】爬虫基础 -- XPath 小案例
weixin_42176612的博客
02-25 268
在项目下新建一个xpath.html 文件，编写代码解析books.xml。代码如下： Title/*定义一个函数用来加载xml文档*/function loadXMLDoc(dname) {if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();//获取XMLHttpRequest对象} else {xhttp = new ActiveX...
通过xpath查询并修改节点下面属性的值，根据用户名修改密码信息。
@必意玲
07-26 5424
1：这是xml结构信息2：根据用户名设置密码
数据爬取+数据可视化.zip
08-03
3. 遍历（Traversal）：通过CSS选择器或XPath表达式遍历DOM树，找到目标元素。 4. 反反爬（Anti-Anti-Crawling）：处理网站的反爬策略，如设置User-Agent、处理Cookie、使用代理IP等。 5. 数据存储（Data Storage）...
java DOM4J 读取XML实例代码
09-05
9. 为了输出XML的结构，代码中使用了缩进级别（`lvl`），以便于可视化XML元素的层次关系。 这段代码提供了一个基础的XML读取示例，但它并不包含XML的写入或修改功能。如果你需要对XML进行更复杂的操作，如添加、...
tree用到js和dom4j-1.6.1.jar包
02-04
在IT行业中，构建交互式用户界面是至关重要的，特别是当涉及到数据可视化时，例如创建树形结构来展示层次关系的数据。在这个场景下，`dhtmlxtree` 和 `DOM4J` 这两个库就显得非常有用。让我们深入探讨一下这两个技术...
毕业设计，基于Python+Django+MySql开发的二手车爬虫数据可视化分析，内含Python完整源代码，数据库脚本
最新发布
01-23
毕业设计，基于Python+Django+MySql开发的二手车爬虫数据可视化分析，内含Python完整源代码，数据库脚本 基于Python的二手车爬虫数据可视化分析设计毕业源码案例设计 程序开发软件：Pycharm 数据库：mysql 现在...
基于Python的二手车爬虫数据可视化分析设计
10-18
爬取的时候采用selenium驱动google浏览器进行数据的抓取，抓取的网页内容传入lxml模块的etree对象HTML方法通过xpath解析DOM树，不过二手车的关键数据比如二手车价格，汽车表显里程数字采用了字体文件加密，这里我们...
jquery实现鼠标框选多个页面元素
06-11
插件名称: DrawSelect； 环境: jQuery. 描述: 鼠标框选 页面元素. 传入对象: 可以被选择的元素集合.
自由div框选页面元素
qq_20793733的博客
04-26 386
目的 最近项目中需要一个自定义布局方案，可自定义框选后组合成一个新的布局方式，如下图所示： 代码如下： <!DOCTYPE html> <html style="margin: 0;width: 100%;height:100%"> <head> <meta charset="utf-8"> <title></title> <style> .out { width: 100%; height: 10
使用xPath技术快速获取指定节点并对其修改--（xPath技术基础）
yanghui07216的博客
12-13 2769
xPath技术     1、问题：当使用dom4j查询比较深的层次结构的节点、属性、标签、文本     2、作用：用于快速获取所需的节点对象     3、在dom4j中如何使用xPath技术         1).导入xPath支持的jar包  jaxen-1.1-beta-6.jar         2).使用xPath的方法             List selectNodes
javascript XPath 实现
oxcow的专栏
06-06 5399
javascript 实现 xml 文件 xpath 筛选
解析网页 - 使用XPath元素定位，源生js遍历组装数据
reading-conference-writing
07-11 1428
使用XPath解析网页，快速获取有效数据、组装成需要的结果。部分思路可适用于页面自动化测试，如Selenium的Xpath
selenium 中 JS原生getElementByXpath
jangta的专栏
11-10 7306
由于前台页面是vue开发 <label for="city" class="el-form-item__label" style="width: 140px;">城市</label> <input type="text" autocomplete="off" placeholder="请选择" class="el-input__inner" readonly="readonly"> 尝试放弃： #driver.find_element_by...
数据可视化 D3.js 选择集与选择元素
一只菜鸡
10-27 414
选择集 d3.select（） 选择第一个元素 d3.selectAll（）选择所有元素 使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。 选择元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定
weixin_44867717的博客
09-22 472
可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定 D3.js 就是在元素选择与元素数据绑定的技术上进行后续操作的，所以元素选择与数据绑定是基础。 1、选择器 d3.select() d3.selectAll() 介绍下常见用法如下（这里先说下基本用法，第四章会详细介绍）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt
《D3.js数据可视化实战手册》——2.2 选择单个元素
weixin_34406086的博客
05-02 76
本节书摘来异步社区《D3.js数据可视化实战手册》一书中的第2章，第2.2节，作者： 【加拿大】Nick Qi Zhu，更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.2 选择单个元素 在进行视觉处理时，我们常常需要选择页面上的单个元素。本例将展示在D3中如何使用CSS选择器来选取特定单个元素。 2.2.1 准备阶段 请在浏览器中打开如下文件的...
Python爬虫必学库与框架：基础到进阶指南
- `portia`：Scrapy的可视化工具，简化爬虫设计和开发过程。 - `restkit`：专注于HTTP资源的工具，简化API调用和处理。 - `demiurge`：基于PyQuery的微框架，提供轻量级的爬虫构建。 最后，解析HTML和XML的数据是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值