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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
jquery $.ajax入门应用二
Nov 19 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
js实现产品缩略图效果
Mar 10 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
Vue渲染过程浅析
Mar 14 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
关于layui时间回显问题的解决方法
Sep 24 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python显示天气预报
2014/03/02 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
解决pip install psycopg2出错问题
2020/07/09 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
初任培训自我鉴定
2013/10/07 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
双语教学实施方案
2014/03/23 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
建党伟业观后感
2015/06/01 职场文书
计算机实训心得体会
2016/01/14 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS