vue获取父元素的元素 vue递归获取父元素的元素实例

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue获取父元素的元素 vue递归获取父元素的元素实例

zj张静   2021-02-02 我要评论
想了解vue递归获取父元素的元素实例的相关内容吗,zj张静在本文为您仔细讲解vue获取父元素的元素的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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
 
  }
    },

以上这篇vue递归获取父元素的元素实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

猜您喜欢

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们