Skip to main content

客户端脚本

示例：移动页面元素到其他位置

为了方便开发者更方便控制元素，我们在平台的关键dom上添加了devid自定义属性，此ID使用特定的业务ID绑定，可以标记出系统的特定元素，用于控制；

查看页面结构说明

案例说明

第一步：查看devid

  • F12打开浏览器控制台，选择元素，如果没有可能收起在更多中了
  • 使用元素选择器选取元素，点击元素选择器，点击页面上的元素
  • 查看devid，复制出来备用

第二步：编写客户端脚本

// 获取要移动的节点
const moveNode = document.querySelector('[devid="aee2024EFBBA5EEfs1Ta"]');
 // 移动到目标节点
const  targetNode = document.querySelector('[devid="adf2024D33E03DA6xzBj"]');  
// 目标节点的父节点
const targetParentNode = targetNode.parentNode;    
  
//将需要移动的节点 插入到 父节点下的目标节点前面
targetParentNode.insertBefore(moveNode,targetNode)

第三步：效果展示

💡
注意：
1、需要考虑dom节点还未渲染导致没有找到的情况，建议使用定时器查找dom，存在时在进行操作
2、具体情况可能受加载、网络影响，编写完对应脚本需要进行测试