一.通过父节点找子节点
1.firstElementChild 返回节点的第一个子节点(指元素节点)
2.lastElementChild 返回节点的最后一个子节点(指元素节点)
3.nextElementSibling 下一个节点(指元素节点)
4.previousElementSibling 上一个节点(指元素节点)
以上是常用的,还有补充在这:
了解:
1.firstChild 返回节点的第一个子节点(指元素节点和文本节点)
2.lastChild 返回节点的最后一个子节点(指元素节点和文本节点)
3.nextSibling 下一个节点(指元素节点和文本节点)
4.previousSibling 上一个节点(指元素节点和文本节点)
注意:
1.这里的文本节点是指换行符等等
以ul为例
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script>
var oUl = document.querySelector("ul");
var oLi = oUl.childNodes;
console.log(oLi);
</script>
打印结果:
二.通过子节点找父节点
parentNode 返回节点的父节点
三.找兄弟节点
1.childNodes 访问所有子节点,包括文本和元素节点
2.children 访问所有子节点,只有元素节点