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 相关文章推荐
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 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
动易数据转成dedecms的php程序
2007/04/07 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
pandas string转dataframe的方法
2018/04/11 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Python读取表格类型文件代码实例
2020/02/17 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
explicit和implicit的含义
2012/11/15 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
应聘教师推荐信
2013/10/31 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
文秘求职信范文
2014/04/10 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
长城导游词300字
2015/01/30 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
二审答辩状范文
2015/05/22 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL