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
JS获取后台Cookies值的小例子
Mar 04 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
Jquery性能优化详解
May 15 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
在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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python购物车程序简单代码
2018/04/18 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
python实现用户名密码校验
2020/03/18 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
台湾专柜女包:KINAZ
2019/12/26 全球购物
临床医学大学生求职信
2013/09/28 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
聘用意向书
2014/07/29 职场文书
庆七一活动总结
2014/08/27 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
丽江古城导游词
2015/02/03 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书