一、节点类型
| 节点名称 | 节点类型 | 节点文本内容 |
|---|---|---|
| #document (文档节点) | 9 | null |
| 大写标签名 (元素节点) | 1 | null |
| #text (文本节点 ) | 3 | 文本内容 |
| #comment (注释节点) | 8 | 注释的内容 |
二、获取节点的方式
childNodes ⇒ 获取所有子节点
document.body.childNodes
children ⇒ 获取所有元素子节点
document.body.children
parentNode ⇒ 获取当前节点的父节点
document.body.parentNode
previousSibling ⇒ 获取当前节点的上一个兄弟节点
document.body.previousSibling
perviousElementSibling ⇒ 获取当前节点的上一个兄弟元素节点
document.body.perviousElementSibling
nextSibling ⇒ 获取当前节点的下一个兄弟节点
document.body.nextSibling
nextElementSibling ⇒ 获取当前节点的下一个兄弟元素节点
document.body.nextElementSibling
firstChild ⇒ 获取第一个子节点
document.body.nextElementSibling
firstElementChild ⇒ 获取第一个元素子节点
document.body.firstElementChild
lastChild ⇒ 获取最后一个子节点
document.body.lastChild
lastElementChild ⇒ 获取最后一个元素子节点
document.body.lastElementChild
offsetParent ⇒ 获取定位父节点，默认默认以 body 标签为定位父节点，如果为 fixed ，结果为 null
document.body.offsetParent
<style>p {position: relative}span {position: fixed}
</style>
<body><div><span></span><p><a href="http://www.baidu.com">百度一下</a></p></div>
</body>
<script>const div = document.querySelector('div');const span = document.querySelector('span');const a = document.querySelector('a');console.log(div.offsetParent); // bodyconsole.log(span.offsetParent); // null --> 固定定位的父级不知道用什么表示，所以就是nullconsole.log(a.offsetParent); // p --> 因为a的父级p加了定位
</script>
