vue递归获取父元素的元素实例
作者：zj张静 发布时间：2024-05-05 09:24:34
标签：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操作）
我就废话不多说了，大家还是看代码吧~
<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
}
},
来源：https://blog.csdn.net/zhangjing1019/article/details/105573908
0
投稿猜你喜欢
- 本文实例讲述了PHP实现对数组分页处理方法。分享给大家供大家参考，具体如下：最近用到了用数组数据分页，这里整理了一下，具体代码如下：<
以网页表格为例：https://www.kuaidaili.com/free/该网站数据存在table标签，直接用requests，需要结合- 我最近在参与Python字节码相关的工作，想与大家分享一些这方面的经验。更准确的说，我正在参与2.6到2.7版本的CPython解释器字节码
- 1、root函数格式root()功能描述返回一个路径串变量应用代码'sample string = c:\intels\jingca
- 创建一个SpringBoot项目其他不赘叙了，引入MyBaties、MySql依赖创建mysql表CREATE TABLE sp_users
- 一、基本介绍在编程中，程序员会经常使用到日期相关的函数，比如：统计某段代码执行花费的时间等等。在 Go 中，开发者为我们提供了 time 包
- 代码如下:<％ FunctIon DownloadFIle(StrFIle) StrFIlename=StrFIle Response
- 本文实例讲述了php实现在服务器端调整图片大小的方法。分享给大家供大家参考。具体分析如下：在服务器端完成图片大小的调整，会比在浏览器的处理有
- 我们都知道打开文件有两种方法:f = open()with open() as f:这两种方法的区别就是第一种方法需要我们自己关闭文件；f.
- 本文的目的是探讨JS相关技术，并不是以杀毒为主要目的，杀毒只是为讲解一些JS做铺垫的，呵呵，文章有点长，倒杯咖啡或者清茶慢慢看，学习切勿急躁
- 在设计主键的时候往往需要考虑以下几点： 1.无意义性：此处无意义是从用户的角度来定义的。这种无意义在一定程度上也会减少数据库的信息冗余。常常
- 1、使用字符串函数replace>>> a = 'hello world'>>> a.r
- 偶写的几个ASP字符串处理函数，用于文章分页的小玩意函数名：StrLen作 用：取得字符串长度（汉字为2)参
- 第一题: give you two var a and b, print the value of a+b, just do it!根据提议
- 导入相关包import timeimport pydashimport base64import requestsfrom lxml imp
- 题目：一个六位数，分别用2，3，4，5，6乘它，得到的五个新数仍是由原数中的六个数字组成，只是位置不同，则此六位数是多少？function
- 昨天给公司服务器重做了一下系统,遇到Asp附件无法上传,之前服务器上使用好好的,怎么重做了就不正常了,于是一番google，baidu，下面
- 我们一般在Excel里面是使用数据连接属性里面写sql语句,或者vba里面利用ado组件执行sql语句。新版的Excel里面带上了Power
- 1、切片使用切片来实现列表的倒序排序，mylist[start:end:step]，不改变原列表。#!/usr/bin/env python
- “你不必严格遵守这些原则，违背它们也不会被处以宗教刑罚。但你应当把这些原则看成警铃，若违背了其中的一条，那么警铃就会响起
