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的跨域传输数据(JSONP)
Mar 10 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
jquery.validate使用详解
Jun 02 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
react组件基本用法示例小结
Apr 27 Javascript
如何用JavaScipt测网速
May 09 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP实现小偷程序实例
2016/10/31 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
SQL中where和having的区别
2012/06/17 面试题
外语系大学生自荐信范文
2014/03/01 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书