前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue获取当前点击元素的父元素、子元素、上级元素等

vue获取当前点击元素的父元素、子元素、上级元素等

原创
作者头像
用户1349575
发布2022-01-26 10:04:21
10.8K0
发布2022-01-26 10:04:21
举报
文章被收录于专栏:编程社区
代码语言:javascript
复制
<div @click = "clickfun($event)">点击</div>

methods: {
    clickfun(e) {
        // e.target 是你当前点击的元素
        // e.currentTarget 是你绑定事件的元素
        #获得点击元素的前一个元素
        e.currentTarget.previousElementSibling.innerHTML
        #获得点击元素的第一个子元素
        e.currentTarget.firstElementChild
        # 获得点击元素的下一个元素
        e.currentTarget.nextElementSibling
        # 获得点击元素中类名为string的元素
        e.currentTarget.getElementsByClassName("string")
        # 获得点击元素的string属性
        e.currentTarget.getAttributeNode('string')
        # 获得点击元素的父级元素
        e.currentTarget.parentElement
        # 获得点击元素的前一个元素的第一个子元素的HTML值
        e.currentTarget.previousElementSibling.firstElementChild.innerHTML
      
        }
            },

$parent 该组件实例的父级组件实例

$children 该组件实例的子组件实例

代码语言:javascript
复制
//通过ref属性获取
this.$refs.handle.$parent
this.$refs.handle.$children

代码语言:javascript
复制
// e 指向当前元素,可以通过 $event传递
e.target 
	是你当前点击的元素
	
e.currentTarget 
	是你绑定事件的元素

e.currentTarget.previousElementSibling.innerHTML
	获得点击元素的前一个元素

e.currentTarget.firstElementChild
	获得点击元素的第一个子元素

e.currentTarget.nextElementSibling
  获得点击元素的下一个元素

e.currentTarget.getElementById("string")
  获得点击元素中id为string的元素

e.currentTarget.getAttributeNode('string')
  获得点击元素的string属性

e.currentTarget.parentElement
  获得点击元素的父级元素

e.currentTarget.previousElementSibling.firstElementChild.innerHTML
   获得点击元素的前一个元素的第一个子元素的HTML值

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档