Javacript中父节点、子节点、兄节点的简单用法[0306]
一、开解:
本文主要讲父子兄节点的简单用法,至于怎么取得节点,可以参考文[0301]和[0302],视情况而定,有时候我们分别会用到父节点、子节点、或是兄节点,这里我简单列举一下。
var mchs = mdh.childNodes;//返回全部子节点
var mph = mdh.parentNode;//返回父节点
var mns = mdh.nextSibling;//返回下一个兄弟节点
var mps = mdh.previousSibling;//返回上一个兄弟节点
var mfc = mdh.firstChild;//返回第一个子节点
var mlc = mdh.lastChild;//返回最后一个子节点
注解:childNodes要当成数组来单个用,因为它是一个集合。
二、实例:
<body>
<div class="dh">
<div class="dh1">我是盒子1</div>
<div class="dh2">我是盒子2</div>
<div class="dh3">
<div class="dhx1">我是小盒子1</div>
<div class="dhx2">我是小盒子2</div>
</div>
<div class="dh4"></div>
</div>
</body>
<script>
var mdh = document.querySelector('.dh3');
var mchs = mdh.childNodes;//返回全部子节点(dhx1,dhx2)
var mph = mdh.parentNode;//返回父节点(dh)
var mns = mdh.nextSibling;//返回下一个兄弟节点(dh4)
var mps = mdh.previousSibling;//返回上一个兄弟节点(dh2)
var mfc = mdh.firstChild;//返回第一个子节点(dhx1)
var mlc = mdh.lastChild;//返回最后一个子节点(dhx2)
</script>
注解:这是一个简单的盒子结构,在后面的小括号里就是返回节点的class名。
三、总结:
在已知某节点元素的情况下,我们可以取得它的子节点,父节点,兄节点元素,当然对于节点元素,还有很多操作方法,我们后面会学习到的。
四、关注:
更多内容请关注我们的公众号: