真不要依赖dom结构

被上了一课,一个好好的功能突然有一天就不行了。原因只是因为安装了一个浏览器插件。一个浏览器插件是如何能影响我项目的功能的呢

说起来功能也很简单,就是密码输入框旁边的的图标,用来控制显示或者隐藏密码内容。原本是没问题的,但是chrome安装了一个LastPass的插件,这个功能就失效了,这就离了个大普。那下面就看看这到底怎么回事

下面就看一下示例代码

html 复制代码
<div>
  <i class="icon-user"></i>
  <input tpye="password" />
  <i class="icon-eye"></i>
</div>

<script>
// 点击眼睛图标的回调函数
function changeVisible(event) {
  var target = event.target;
  if (文本状态) {
    // 切换为密码状态
    target.previousElementSibling.type = 'password'
  } else {
    // 切换为文本状态
    target.previousElementSibling.type = 'text'
  }
}
</script>

原本工作正常,奈何有一天有人安装了插件 LastPass ,这个插件具体什么功能没研究,只是发现这个插件会在密码框后面插入一个图标。插件运行之后,原本的dom变成了下面这样

html 复制代码
<div>
  <i class="icon-user"></i>
  <input tpye="password" />
  <i class="last-pass-icon"></i>
  <i class="icon-eye"></i>
</div>

下面的问题就明白了。由于插件改变了原来的dom结构,导致原代码中使用的 previousElementSibling 获取到的就不再是原来的input了。这就导致了原来的功能失效


问题不大,简单记录一下。每次都有不同的坑。但凡有可能,就不要使用这类dom结构相关的api, 查找获取元素尽量使用class,id之类的。

相关推荐
徊忆羽菲19 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃29 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想42 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷43 分钟前
TypeScript-webpack
javascript·webpack·typescript
Rockson1 小时前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子2 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹3 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志3 小时前
typescript结构化类型应用两例
javascript
gnip4 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员4 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js