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 相关文章推荐
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
JS/CSS实现字符串单词首字母大写功能
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
php实现图片局部打马赛克的方法
2015/02/11 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
python中pygame模块用法实例
2014/10/09 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
python多进程实现进程间通信实例
2017/11/24 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python类反射机制使用实例解析
2019/12/30 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
什么是跨站脚本攻击
2014/12/11 面试题
口头翻译求职人自荐信
2013/12/07 职场文书
公务员保密承诺书
2014/03/27 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
政府门卫岗位职责
2014/04/29 职场文书
服务承诺书怎么写
2014/05/24 职场文书
员工生日会策划方案
2014/06/14 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
中班下学期个人总结
2015/02/12 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python