vue递归获取父元素的元素实例


Posted in Javascript onAugust 07, 2020

使用递归查找父元素,知道查到想要的元素,然后return

getParentTag(startTag) {
   var self = this;
   // 传入标签是否是DOM对象
   if (!(startTag instanceof HTMLElement)) return;
   // 父级标签是否是body,是着停止返回集合,反之继续
   let nodeName = "";
   if (startTag.parentElement) {
    nodeName = startTag.parentElement.nodeName ? startTag.parentElement.nodeName : "";
   } else {
    return;
   }
   if ("BODY" !== nodeName) {
    if (nodeName == "TD") {
     return startTag.parentElement;
    } else {
     if (startTag.parentElement.parentElement) {
      return self.getParentTag(startTag.parentElement);
     } else {
      return false;
     }
    }
   }
  }

调用函数

this.getParentTag(event.target);

补充知识:Vue.js如何获得兄弟元素,子元素,父元素(DOM操作)

我就废话不多说了,大家还是看代码吧~

<button @click = “clickfun($event)”>点击</button>
 
methods: {
clickfun(e) {
// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素
  #获得点击元素的前一个元素
  e.currentTarget.previousElementSibling.innerHTML
  #获得点击元素的第一个子元素
  e.currentTarget.firstElementChild
  # 获得点击元素的下一个元素
  e.currentTarget.nextElementSibling
  # 获得点击元素中id为string的元素
  e.currentTarget.getElementById("string")
  # 获得点击元素的string属性
  e.currentTarget.getAttributeNode('string')
  # 获得点击元素的父级元素
  e.currentTarget.parentElement
  # 获得点击元素的前一个元素的第一个子元素的HTML值
  e.currentTarget.previousElementSibling.firstElementChild.innerHTML
 
  }
    },

以上这篇vue递归获取父元素的元素实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
JsRender实用入门教程
Oct 31 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
在vue中使用Base64转码的案例
Aug 07 #Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 #Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 #Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 #Javascript
浅谈javascript如何获取文件后缀名
Aug 07 #Javascript
vue 使用post/get 下载导出文件操作
Aug 07 #Javascript
基于javascript的无缝滚动动画实现2
Aug 07 #Javascript
You might like
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
nodejs win7下安装方法
2012/05/24 NodeJs
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
js同源策略详解
2015/05/21 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python translator使用实例
2008/09/06 Python
分享Python文本生成二维码实例
2016/01/06 Python
python僵尸进程产生的原因
2017/07/21 Python
Python中常见的异常总结
2018/02/20 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
详解python程序中的多任务
2020/09/16 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
应届毕业生的个人自我鉴定
2013/10/24 职场文书
医药个人求职信范文
2014/01/29 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js