真不要依赖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之类的。

相关推荐
伍哥的传说6 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4536 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2436 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
Feather_748 小时前
从Taro的Dialog.open出发,学习远程控制组件之【事件驱动】
javascript·学习·taro
\光辉岁月/8 小时前
Axios基本使用
javascript·axios
波波鱼દ ᵕ̈ ૩9 小时前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
cypking10 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
Watermelo61710 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
Micro麦可乐10 小时前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo61710 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6