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 盒模型 尺寸深入理解
Dec 31 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
解析php中的escape函数
2013/06/29 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
js实现密码强度检验
2017/01/15 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python进程间通信Queue实例解析
2018/01/25 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
应届毕业生个人自荐信范文
2013/11/30 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2016党员入党决心书
2015/09/22 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python