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为数字添加逗号并格式化数字的代码
Aug 23 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
js 概率计算(简单版)
Sep 12 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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中session退出登陆问题
2014/02/27 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
python简单文本处理的方法
2015/07/10 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书