Vue.js如何获得兄弟元素，子元素，父元素（DOM操作）

Vue.js事件处理与DOM操作

最新推荐文章于 2024-02-27 09:09:50 发布

BayFeng

最新推荐文章于 2024-02-27 09:09:50 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

原文链接：https://blog.youkuaiyun.com/qq_15256443/article/details/82584931

前端专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用事件处理函数，并展示了如何通过事件对象(e)访问和操作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

}