js如何获取兄弟、父类等节点

获取兄弟节点：
要获取兄弟节点，可以使用nextSibling和previousSibling属性。这两个属性分别代表下一个兄弟节点和上一个兄弟节点。需要注意的是，这两个属性获取到的节点可能是文本节点，而不是我们想要的HTML元素节点，所以我们需要进行判断。如果是文本节点，则继续获取下一个（或上一个）节点，直到获取到的节点是一个元素节点。

示例代码：

<div>
  <span>兄弟节点1</span>
  纯文本节点
  <p>兄弟节点2</p>
</div>

<script>
  const span = document.querySelector('span');
  console.log(span.nextSibling); // 获取的是右侧的文本节点
  console.log(span.nextSibling.nextSibling); // 获取的是兄弟元素节点<p>兄弟节点2</p>
</script>

获取父节点：
要获取父节点，我们可以使用parentNode属性，该属性返回父节点。同样需要注意的是，parentNode属性获取到的也可能是文本节点，所以我们也需要进行判断。

示例代码：

<div>
  <span>子节点</span>
</div>

<script>
  const span = document.querySelector('span');
  console.log(span.parentNode); // 获取的是父元素<div>
</script>

获取指定class的节点：
要获取指定class的节点，可以使用querySelector和querySelectorAll方法。querySelector可以查找到满足条件的第一个节点，querySelectorAll可以查找到所有满足条件的节点。需要注意的是，传入的参数需要使用CSS选择器的语法格式，例如.class表示查找class为class的元素节点。

示例代码：

<div class="a">
  <div class="b">节点1</div>
  <div class="c">节点2</div>
</div>

<script>
  const node1 = document.querySelector('.b');
  console.log(node1); // 获取的是class为b的元素节点<div class="b">节点1</div>

  const nodeList = document.querySelectorAll('.c');
  console.log(nodeList); // 获取的是所有class为c的元素节点，返回一个NodeList对象
  console.log(nodeList[0]); // NodeList是一个类数组对象，可以通过下标获取
</script>