vue获取节点的父节点、兄弟节点、子节点
<span @click="getClickInfo(event)"> </span>
getClickInfo: function (e) {
let clickDom = e.currentTarget; // currentTarget 获取绑定点击事件的节点
let currentDom = e.target; // target 获取当前点击节点
let parent = clickDom.parentElement; // parentElement获取绑定事件节点的父节点
let previous = clickDom.previousElementSibling; // previousElementSibling获取绑定事件节点的前一个节点
let previousInner = previous.innerHTML; // 获取绑定事件节点的前一个节点的内容
let next = clickDom.nextElementSibling; // nextElementSibling获取绑定事件节点的后一个节点
let firstChild = clickDom.firstElementChild; // firstElementChild获取绑定事件节点的第一个子节点
let childNodes = clickDom.childNodes; // childNodes获取子节点,包括元素节点和文本节点
let children = clickDom.children; // children获取子节点,只获取元素节点
let childElementCount = clickDom.childElementCount; // childElementCount获取子节点的个数
let lastElementChild = clickDom.lastElementChild; // lastElementChild获取最后一个子节点
let lastChild = clickDom.lastChild; // lastChild获取最后一个子节点,包括元素节点和文本节点
}
============ 欢迎各位老板打赏~ ===========
与本文相关的文章
- · vue/react/node/vite/npm/yarn build自动更新版本号
- · TinyMCE工具栏配置详解
- · vue3无法使用vue-devtools
- · VUE/REACT图表
- · vue使用element-ui中的Message 、MessageBox 、Notification
- · vue import .scss报错
- · vue中引入.svg图标,使用iconfont图标库(SvgIcon组件使用)
- · vue 安装sass,运行后报错loaderContext.getResolve is not a function
- · vue中无法加载scss
- · Vue开发环境安装并集成element-ui示例
- · 微信小程序开发中,通过API生成的体验版短链接,打开跳转到的是生产版
- · Nest.js 、 Next.js、 Nuxt.js的区别
