js与jquery获取父级元素,子级元素,兄弟元素的实现方法

在JavaScript和jQuery中，获取DOM元素的父级、子级以及兄弟元素都有各自的实现方法。下面分别给出它们的示例代码。

### JavaScript

#### 获取父级元素

使用`parentNode`属性。

// 假设你有一个元素 var elem = document.getElementById("someElementId");
var parent = elem.parentNode;

#### 获取子级元素

- 获取所有子元素：使用`childNodes`（包含文本节点和元素节点）或`children`（仅包含元素节点）。

// 使用children
var children = elem.children;

// 遍历所有子元素
for (var i = 0; i < children.length; i++) {
    console.log(children[i]);
}

#### 获取兄弟元素

- 前一个兄弟元素：`previousSibling`（注意，它可能是一个文本节点）

- 下一个兄弟元素：`nextSibling`（同样，可能是一个文本节点）

- 使用`nextElementSibling`和`previousElementSibling`来获取前一个或下一个元素节点（跳过非元素节点）

// 下一个兄弟元素
var nextSibling = elem.nextElementSibling;

// 前一个兄弟元素
var prevSibling = elem.previousElementSibling;

### jQuery

#### 获取父级元素

使用`.parent()`方法。

// 假设你有一个jQuery对象 var $elem = $("#someElementId");
var $parent = $elem.parent();

#### 获取子级元素

- 获取所有子元素：使用`.children()`方法。

// 获取所有子元素
var $children = $elem.children();

// 遍历所有子元素
$children.each(function() {
    console.log($(this));
});

#### 获取兄弟元素

- 下一个兄弟元素：`.next()`

- 前一个兄弟元素：`.prev()`

- 所有兄弟元素：`.siblings()`

// 下一个兄弟元素
var $nextSibling = $elem.next();

// 前一个兄弟元素
var $prevSibling = $elem.prev();

// 所有兄弟元素
var $siblings = $elem.siblings();

以上就是在JavaScript和jQuery中获取父级元素、子级元素以及兄弟元素的方法。希望这能帮助到你！