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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
Javascript创建类和对象详解
May 31 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 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
菜鸟修复电子管记
2021/03/02 无线电
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
对比分析json及XML
2014/11/28 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python快排算法详解
2019/03/04 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
自荐信封面
2013/12/04 职场文书
经济管理自荐书
2014/06/09 职场文书
十佳家长事迹材料
2014/08/26 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
详解Vue的options
2021/05/15 Vue.js
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server