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检测客户端不是firefox则提示下载
Apr 07 Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 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&amp;MYSQL留言板源码
2020/07/19 PHP
php 破解防盗链图片函数
2008/12/09 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
异步动态加载js与css文件的js代码
2013/09/15 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python得到windows自启动列表的方法
2018/10/14 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
python集合的新增元素方法整理
2020/12/07 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
运动会广播稿500字
2014/01/28 职场文书
秘书英文求职信范文
2014/01/31 职场文书
同事吵架检讨书
2014/02/05 职场文书
中学生操行评语
2014/04/24 职场文书
工作年限证明范本
2015/06/15 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
2016年情人节问候语
2015/11/11 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL