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

获取父级元素、子级元素以及兄弟元素是前端开发中非常常见的需求。而在JavaScript和jQuery中，实现这些功能都有相应的方法。

JavaScript获取元素

获取父级元素

在JavaScript中，可以通过parentNode属性获取元素的父级元素。例如，假设有以下HTML结构：

<div>
  <p>Hello, world!</p>
</div>

如果要获取<p>元素的父级元素<div>，可以使用如下代码：

var p = document.querySelector('p');
var parent = p.parentNode; // 获取p元素的父级元素
console.log(parent); // 输出<div>元素

获取子级元素

在JavaScript中，可以通过childNodes和children属性获取元素的子级元素。其中，childNodes会获取所有的子节点（包括文本节点），而children只会获取元素节点。

例如，假设有以下HTML结构：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

如果要获取<ul>元素的所有直接子级<li>元素，可以使用如下代码：

var ul = document.querySelector('ul');
var children = ul.children; // 获取ul元素的直接子级元素
console.log(children); // 输出数组，包含<li>元素

获取兄弟元素

在JavaScript中，可以通过previousSibling和nextSibling属性获取元素的前一个和后一个兄弟元素。这些属性会返回当前元素前后的第一个节点，因此其返回值可能为文本节点，需要进一步判断是否为元素节点。

例如，假设有以下HTML结构：

<ul>
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
</ul>

如果要获取<li class="active">元素前后的兄弟元素，可以使用如下代码：

var active = document.querySelector('.active');
var prev = active.previousSibling; // 获取前一个兄弟元素
var next = active.nextSibling; // 获取后一个兄弟元素
console.log(prev, next); // 输出文本节点和<li>元素

jQuery获取元素

获取父级元素

在jQuery中，可以使用parent方法获取元素的父级元素。例如，假设有以下HTML结构：

<div>
  <p>Hello, world!</p>
</div>

如果要获取<p>元素的父级元素<div>，可以使用如下代码：

var p = $('p');
var parent = p.parent(); // 获取p元素的父级元素
console.log(parent); // 输出<div>元素

获取子级元素

在jQuery中，可以使用children方法获取元素的子级元素。例如，假设有以下HTML结构：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

如果要获取<ul>元素的所有直接子级<li>元素，可以使用如下代码：

var ul = $('ul');
var children = ul.children(); // 获取ul元素的直接子级元素
console.log(children); // 输出jQuery对象，含有<li>元素

获取兄弟元素

在jQuery中，可以使用prev和next方法获取元素的前一个和后一个兄弟元素。这些方法会返回当前元素前后的第一个元素节点，因此其返回值已经是元素节点，无需进一步判断。

例如，假设有以下HTML结构：

<ul>
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
</ul>

如果要获取<li class="active">元素前后的兄弟元素，可以使用如下代码：

var active = $('.active');
var prev = active.prev(); // 获取前一个兄弟元素
var next = active.next(); // 获取后一个兄弟元素
console.log(prev, next); // 输出jQuery对象，含有<li>元素

需要注意的是，jQuery获取到的元素为jQuery对象，需要通过get方法或直接使用下标获取其中的元素节点。

总结

JavaScript和jQuery都提供了一系列方法用于获取元素的父级元素、子级元素和兄弟元素。在实际开发中，需要根据具体需求选择不同的方法来获取元素。