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的键盘控制事件说明
Apr 15 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
如何快速上手Vuex
Feb 14 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP设计模式之装饰者模式
2012/02/29 PHP
学习php中的正则表达式
2014/08/17 PHP
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
jQuery设计思想
2017/03/07 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python requests.post带head和body的实例
2019/01/02 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
详解Python3定时器任务代码
2019/09/23 Python
python获取array中指定元素的示例
2019/11/26 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
Python字典dict常用方法函数实例
2020/11/09 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
运动会广播稿30字
2014/01/21 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
学校工作推荐信范文
2014/07/11 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
公司仓库管理制度
2015/08/04 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL