vue点击事件时⽗、⼦、兄弟元素获取与操作（DOM元素对象）
在vue的点击事件中，有许多东西需要使⽤javascript的语句来进⾏操作，
例如html节点信息的获取，以及相关节点的操作等
<button @click=f_click($event)> 测试点击 </button>
HTML DOM 节点
htmlbutton属性
在 HTML DOM (Document Object Model) 中, 每个东西都是节点 :
⽂档本⾝就是⼀个⽂档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插⼊到 HTML 元素⽂本是⽂本节点
注释是注释节点
这⾥记录vue点击事件的节点信息获取与操作：
methods: {
f_click: function(event){
// 当前点击的元素
event.target;
// 绑定事件的元素
event.currentTarget;
// （target与currentTarget的区别主要体现在使⽤事件委托时，发⽣事件委托时，
// 点击的元素与绑定事件的元素⾮同⼀元素，反之不发⽣事件委托时，两者相同，是同⼀元素）
// 获得绑定事件元素的前⼀个节点信息（包含元素节点、属性节点、⽂本节点、注释节点）
event.currentTarget.previousSibling;
// 获得绑定事件元素的前⼀个元素节点（只包含元素节点，只有html内容）
event.currentTarget.previousElementSibling;
// 下⼀个元素信息获取使⽤ nextSibling、nextElementSibling
// 获得绑定事件元素的⽗节点信息
event.currentTarget.parentNode;
// 获得绑定事件元素的⽗级元素
event.currentTarget.parentElement;
// 获得绑定事件元素的第⼀个⼦节点信息
event.currentTarget.firstChild;
// 获得绑定事件元素的第⼀个⼦元素
event.currentTarget.firstElementChild;
// 获得绑定事件元素中id为ceshi的元素集合
ElementById("ceshi");
// 获得绑定事件元素中class为ceshi的元素集合
ElementsByClassName("ceshi");
// 获得绑定事件元素的的内容（类似jquery的text()）
Content;
// 获得绑定事件元素的的内容（类似jquery的html()）
event.currentTarget.innerHTML;
// 获得绑定事件元素的ceshi属性值（类似jquery的attr('ceshi')）
Attribute("ceshi");
/
/ 删除class属性某个值（类似jquery的removeClass）
event.ElementsByClassName('active')[0].ve("active")
// 向class属性中添加值（类似jquery的addClass）
event.currentTarget.classList.add("active")
// 点击删除当前元素
event.veChild(event.currentTarget);
// 点击删除当前元素的⽗级元素
event.currentTarget.veChild(event.currentTarget.parentElement);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。