JavaScript：通过类名获取元素内元素及类中首/尾<p>元素（无jQuery）

其实思路很简单——先定位到父元素，再在它的范围内找目标子元素就行，给你两种常用的实现方式：

• 方法1：用querySelector/querySelectorAll（推荐，语法灵活）
  先拿到父元素，再通过父元素的querySelector找到第一个匹配类名的子元素，或者用querySelectorAll获取所有匹配的子元素：

  // 获取父元素（假设父元素类名为parent）
  const parent = document.querySelector('.parent');
  // 找父元素内第一个类名为child的子元素
  const firstChild = parent.querySelector('.child');
  // 找父元素内所有类名为child的子元素（返回静态NodeList）
  const allChildren = parent.querySelectorAll('.child');
  

• 方法2：用getElementsByClassName
  这种方法返回的是动态HTMLCollection，元素变化时会自动更新，适合需要实时同步元素列表的场景：

  const parent = document.querySelector('.parent');
  // 获取父元素内所有类名为child的子元素
  const childElements = parent.getElementsByClassName('child');
  // 取第一个子元素直接用索引
  const firstChild = childElements[0];
  

针对你给出的示例结构：

<div class="demo"> 
  <p>some text</p> 
  <p>some other text</p> 
</div>

这里有几种不用jQuery的实现方式，按需选就行：

获取第一个

元素 #

• 方式1：直接链式调用querySelector，用伪类快速定位

  const firstPara = document.querySelector('.demo p:first-child');
  

• 方式2：先拿到demo元素，再通过children属性取第一个元素（children只包含元素节点，正好匹配p标签）

  const demo = document.querySelector('.demo');
  const firstPara = demo.children[0];
  

获取最后一个

元素 #

• 方式1：用:last-child伪类直接定位

  const lastPara = document.querySelector('.demo p:last-child');
  

• 方式2：先获取所有p元素，再取最后一个

  const demo = document.querySelector('.demo');
  const allParas = demo.querySelectorAll('p');
  const lastPara = allParas[allParas.length - 1];
  

• 方式3：用children属性结合长度取最后一个

  const demo = document.querySelector('.demo');
  const lastPara = demo.children[demo.children.length - 1];
  

内容的提问来源于stack exchange，提问作者Habib