最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue递归获取父元素的元素代码实例
时间:2020-08-07 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下vue递归获取父元素的元素代码实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
使用递归查找父元素,知道查到想要的元素,然后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操作)
代码如下:
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 } },
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12