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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
js回文数的4种判断方法示例
Jun 04 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
基于文本的访客签到簿
2006/10/09 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
微信小程序实现星级评价
2019/11/20 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python文件选择对话框的操作方法
2019/06/27 Python
python list转置和前后反转的例子
2019/08/26 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
python zip()函数的使用示例
2020/09/23 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
绘画设计学生的个人自我评价
2013/09/20 职场文书
电信专业应届生自荐信
2013/09/28 职场文书
医科大学生的自我评价
2013/12/04 职场文书
促销活动策划方案
2014/01/12 职场文书
培训协议书范本
2014/04/22 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
党支部培养考察意见
2015/06/02 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python