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

相关推荐
quan26318 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
练习时长两年半的Java练习生(升级中)1 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
良木林1 小时前
JS中正则表达式的运用
前端·javascript·正则表达式
芭拉拉小魔仙2 小时前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信
吃饭睡觉打豆豆嘛3 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript