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 判断函数类型完美解决方案
Sep 02 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
jQuery实现滚动效果
Nov 17 jQuery
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
vue实现可拖拽的dialog弹框
May 13 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP多进程编程实例详解
2017/07/19 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python的sys.path模块路径添加方式
2020/03/09 Python
上海微创软件面试题
2012/06/14 面试题
电子商务专业个人的自我评价
2013/11/19 职场文书
计算机求职信
2013/12/01 职场文书
课程设计心得体会
2013/12/28 职场文书
交通安全教育制度
2014/02/02 职场文书
读书小明星事迹材料
2014/05/03 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
清明节随笔
2015/08/15 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
pytorch--之halfTensor的使用详解
2021/05/24 Python
Python django中如何使用restful框架
2021/06/23 Python