一、节点之间的关系
- （1）获取父节点
- （2）上一个兄弟节点
- （3）下一个兄弟节点
- （4）获取标签中的第一个子节点
- （5）获取标签中的最后一个子节点
- （6）获取元素的节点
- （7）获取任意兄弟的节点
- 节点包括：标签、属性、文本、注释等
- 直接上代码
<style>
#box{
200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<button class="btn">按钮</button>
<span id="span">
<a href="#">一个链接</a>
</span>
<p class="lk">我是段落标签</p>
<div>哈哈哈</div>
</div>
<script>
window.onload = function (ev) {
var a = document.getElementsByTagName('a')[0];
console.log(a.parentNode);//获取父节点
console.log(a.parentElement);//也是用来获取父节点，但还有点区别，后面再说
//获取兄弟节点
var span = document.getElementById("span");
//下一个节点
var nextEle = span.nextSibling;//在JS中也会把空格和换行当成一个标签
var nextEle2 = span.nextElementSibling || span.nextSibling;//这样做一个判断，拿来的元素的节点而不是换行或者空格
var preEle = span.previousElementSibling || span.previousSibling;
console.log(nextEle);
console.log(nextEle2);
console.log(preEle);
console.log("-------------------");
var box = document.getElementById("box");
//获取第一个子节点
console.log(box.firstElementChild || box.firstChild);
//获取最后一个节点
console.log(box.lastElementChild || box.lastChild);
//获取所有的节点
console.log(box.childNodes);
//获取所有的元素节点（也就是非换行空格的节点）
console.log(box.children);
}
</script>
</body>
二、源码：
- D28_1_GetAPI.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/DD28_1_GetAPI.html - 博客园：
https://www.cnblogs.com/ruigege0000/ - CSDN：
https://blog.csdn.net/weixin_44630050?t=1 - 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
