a.innerHTML = ""
原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ
本文实例讲述了JS获取子节点、父节点和兄弟节点的方法。分享给大家供大家参考,具体如下:
一、js获取子节点的方式
1. 通过获取dom方式直接获取子节点
其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。
var a = document.getElementById(test).getElementsByTagName(div);
2. 通过childNodes获取子节点
使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式。他会把
e.currentTarget //是你绑定事件的元素
//获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
//获得点击元素的第一个子元素
Vue中的ref用来给元素或子组件注册引用信息,而$refs可以用来获取ref注册过的元素或组件,并调用其方法。
二、基本用法
用法: 子组件上定义ref=“refName”, 父组件的方法中用 this.$refs.refName.method 去调用子组件方法
三、几种情况
当ref用在组件上时,用$refs获取到的的是组件实例。
<template>
<div id="app">
<Home ref="test" />
getClickInfo: function (e) {
let clickDom = e.currentTarget; // currentTarget 获取绑定点击事件的节点
1、通过父节点获取:
(1)parentObj.childNodes:获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。
注意:经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
(2)parentObj.children:获取已知节点的直接子节点数组。
注意:经测试,在IE7上,和childNode
//首先是获取当前点击事件
//view绑定并传递 $event
<span v-show="depart" v-on:click="searchDepart($event)">部门</span>
二、然后,script
e.target; //是你当前点击的元素
e.currentTarget; //是你绑定事件的元素
用法一:ref加在普通的元素上,用this.$refs.name获取到的是dom元素
用法二:ref加在组件上,用this.$refs.name获取到的是组件实例,可以使用组价的所有方法
$parent用法
通过this.$parent可以访问到当前组件的父组件里所有的数据以及方法
Vue组件通信练习巩固
在Vue实例下data数据层有一个数组list(数据任意存放),2个组件,组件1 cpn1有子组件cpnn1,cpnn1有子组件cpnnn1,
在组件cpnnn1
<tr v-for="(item,index) in datalist"
:key="item.id" @click="selected(index)"
:class="{success:item.selected}"
:class=item.selected?success:"">
<td&g...
1. 通过获取dom方式直接获取子节点
其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。
var a = document.getElementById("test").getElementsByTagName("div");
2. 通过childNodes获取子节点
使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式