JS（JavaScript）是一种在浏览器端广泛使用的编程语言，它用于网页的动态效果和与用户的交互功能。在处理DOM（文档对象模型）时，经常需要获取元素的子节点、父节点和兄弟节点，以便于操作和更新页面元素。本篇文章将总结和介绍JavaScript中获取子节点、父节点、兄弟节点的方法，并提供两种获取兄弟节点的实现方式。
了解一些DOM节点的基础知识是很有必要的。DOM节点是构成HTML文档的最小单元，包括元素节点、属性节点、文本节点、注释节点和文档节点等。元素节点对应HTML标签，属性节点对应元素的属性（如id、class），文本节点对应元素节点或属性节点中的文本内容，注释节点用于文档的注释，而文档节点则是整个文档的根节点，即document对象。这些节点类型可以通过nodeType、nodeName和nodeValue属性来获取。
获取子节点的方法有：
- `parentObj.firstChild`：获取已知父节点的第一个子节点。
- `parentObj.lastChild`：获取已知父节点的最后一个子节点。
- `parentObj.childNodes`：获取已知父节点的子节点数组，但在旧版IE中可能包含文本节点。
- `parentObj.children`：获取已知节点的直接子节点数组，在新版浏览器和IE7+中与`childNodes`效果一致。
- `parentObj.getElementsByTagName(tagName)`：返回已知子节点中类型为指定值的子节点数组，如`div.getElementsByTagName('p')`会返回所有`<div>`标签内的`<p>`标签子节点。
获取父节点的方法相对简单，通常使用：
- `childNode.parentNode`：获取已知节点的父节点。
获取兄弟节点的方法包括：
- `neighbourNode.previousSibling`：获取已知节点的前一个兄弟节点。
- `neighbourNode.nextSibling`：获取已知节点的下一个兄弟节点。
如果需要获取兄弟节点的数组（剔除自身），可以编写函数来实现。有两种方法：
方法一：
```javascript
function sibling(elem) {
var arr = [];
var b = elem.parentNode.children;
for (var i = 0; i < b.length; i++) {
if (b[i] !== elem) arr.push(b[i]);
}
return arr;
}
```
此方法通过父元素的子元素先找到含自己在内的“兄弟元素”，然后在剔除自身。
方法二：
```javascript
jQuery.sibling = function(n, elem) {
var arr = [];
for (; n; n = n.nextSibling) {
if (n.nodeType == 1 && (!elem || elem !== n)) arr.push(n);
}
return arr;
};
```
此方法使用jQuery实现，通过查找元素的第一个子元素然后往下找下一个紧邻元素，判断并剔除自身。
另外，如果需要获取所有元素子节点，可以自定义函数来实现：
```javascript
function getChildN() {
var arr = [];
var n = elem.parentNode.firstChild;
for (; n; n = n.nextSibling) {
if (n.nodeType === 1) arr.push(n);
}
return arr;
}
```
在实际开发过程中，正确使用这些方法可以有效地定位和操作DOM元素，从而实现复杂的用户交互和页面动态更新。需要注意的是，不同浏览器对DOM操作的支持程度可能有所不同，特别是在旧版浏览器中，某些方法可能不会按预期工作，这就需要开发者在编写代码时进行相应的兼容性处理。
