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

相关推荐
北城以北888822 分钟前
JavaScript--基础ES(一)
开发语言·javascript·intellij-idea
珍宝商店1 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
宋辰月2 小时前
echarts项目积累
前端·javascript·echarts
醉方休2 小时前
TensorFlow.js高级功能
javascript·人工智能·tensorflow
炒香菇的书呆子2 小时前
基于Amazon S3设置AWS Transfer Family Web 应用程序
javascript·aws
!chen3 小时前
学习 React 前掌握 JavaScript 核心概念
javascript·学习·react.js
YAY_tyy3 小时前
【JavaScript 性能优化实战】第五篇:运行时性能优化进阶(懒加载 + 预加载 + 资源优先级)
前端·javascript·性能优化
正义的大古3 小时前
OpenLayers地图交互 -- 章节七:指针交互详解
前端·javascript·vue.js·openlayers
qwy7152292581633 小时前
vue自定义指令
前端·javascript·vue.js
niusir3 小时前
Zustand 实战:10 行代码搞定全局状态
前端·javascript·react.js