700字范文 > Javacript中父节点子节点兄节点的简单用法[0306]

Javacript中父节点子节点兄节点的简单用法[0306]

时间：2022-12-09 01:06:30

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="dhx1">我是小盒子1</div>

<div class="dhx2">我是小盒子2</div>

</div>

</div>

</body>

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名。

三、总结：

在已知某节点元素的情况下，我们可以取得它的子节点，父节点，兄节点元素，当然对于节点元素，还有很多操作方法，我们后面会学习到的。

四、关注：

更多内容请关注我们的公众号：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。