JavaScript 节点关系

这是我参与更文挑战的第25天，活动详情查看： 更文挑战

前言

在实际业务开发中，很多场景下，我们需要通过节点之间的关系进行DOM操作，尽管有时候我们使用的是被封装好的库，但是针对不同场景下的DOM操作需求是不变的，只是会有不同的替代方案而已。

而本文则是讲讲在原生JavaScript一些常用的，可以通过节点关系获取节点、操作节点的函数。

在正式开始本文前，得确保读者是有一个共识的。

1、节点树：指浏览器内核在解析HTML文件时，根据标签的包含关系生成的节点树；

2、层级：最常见的层级是通过z-index控制，或后面写的层级比前面的高。

父节点

先从获取父节点开始，在JQuery中，可以通过$().parent()获取到选中节点的父级，而JavaScript中也有一些关于父级节点的方法，了解下吧。

1、parentNode

ele.parentNode获取当前元素在节点树上的直接父元素。

var ele = document.getElementById('son').parentNode;

语法如上，最终获取的是id为son的元素的父级元素。

2、parentElement

这个属性返回的值和parentNode是一致的，区别在于它是ie的标准。不过两者的兼容性都还不错，所以可以根据个人爱好选择。

<div class="wrap">
    <div class="absolute" id="son"></div>
</div>
<script>
    var ele = document.getElementById('son').parentNode;
    var ele2 = document.getElementById('son').parentElement;
    console.log(ele); // <div class="wrap">...</div>
    console.log(ele2); // <div class="wrap">...</div>
</script>>\

3、offsetParent

offset，一眼看过去是和偏移量有关系，但其实这是个一个获取层级树上的父级的方法。

<style>
    .relative{ position: relative; }
    .absolute{ position: absolute; }
</style>

<div class="relative">
    <div class="wrap">
        <div class="absolute" id="son"></div>
    </div>
</div>

<script>
    var ele = document.getElementById('son').parentNode;
    var ele2 = document.getElementById('son').parentElement;
    var ele3 = document.getElementById('son').offsetParent;
    console.log(ele); // <div class="wrap">...</div>
    console.log(ele2);// <div class="wrap">...</div>
    console.log(ele3);// <div class="relative">...</div>
</script>

兄弟节点、子节点

前面讲了获取父级节点的方法，相信大家对该类属性已经有了一个清晰的认知了。

那么接下来，加快速度。

获取兄弟的节点的方法有如下

previousSibling: 获取上一个节点，其中火狐、谷歌、IE9+版本获取上一个兄弟节点（标签、空文档、换行），IE678获取上一个兄弟元素节点（标签）

nextSibling：同上，获取下一个节点

firstChild：同上，获取第一个子节点

lastChild：同上，获取最后一个子节点

previousElementSibling： 获取上一个节点，其中火狐、谷歌、IE9+都是上一个元素节点

nextElementSibling：同上，获取下一个节点

firstElementChild：同上，获取第一个子节点

lastElementCHild：同上，获取最后一个子节点

所有子节点

childNodes: 子节点的集合，是一个数组的格式。但他会把换行和空格也当成是节点信息。

children:获取子元素是最方便的，返回一个数组。对其获取子元素的访问只需按数组的访问形式即可。

结尾

后面提到的兄弟节点、子节点、所有子节点语法和获取父级节点是一样的，所以这里只是针对不同属性的一些特点做一个阐述，以及系数列出可以使用的属性。

哦吼吼吼。

我爱你呀，你爱我，明天周六好开心。