JavaScript中如何通过带类父元素获取无类无ID子元素的<b>标签文本？

<div class="parent element"> 
  <h5> some other text<b>text</b> </h5> 
</div>

<script>
  // 直接定位到目标b元素并提取文本
  const boldText = document.querySelector('.parent.element h5 b').textContent;
  console.log(boldText); // 输出: text
</script>

这里要注意父元素的选择器写法：.parent.element是同时拥有parent和element两个类的元素，别写成.parent .element（那会找parent类元素下的element类子元素）。

方法二：先获取父元素再查找子元素 #

如果需要先对父元素做一些前置操作（比如修改样式、判断是否存在），可以先拿到父元素，再从内部查找目标：

<div class="parent element"> 
  <h5> some other text<b>text</b> </h5> 
</div>

<script>
  // 1. 获取父元素
  const parentElement = document.querySelector('.parent.element');
  // 2. 从父元素内部查找b标签（这里指定了h5层级，避免匹配到其他b元素）
  const boldElement = parentElement.querySelector('h5 b');
  // 3. 提取文本内容（用textContent比innerHTML更安全，只会拿到纯文本）
  const boldText = boldElement.textContent;
  console.log(boldText); // 输出: text
</script>

处理多个匹配元素的情况 #

如果页面上有多个结构相同的父元素，想要批量获取所有标签的文本，可以用querySelectorAll遍历：

<div class="parent element"> 
  <h5> some other text<b>text1</b> </h5> 
</div>
<div class="parent element"> 
  <h5> some other text<b>text2</b> </h5> 
</div>

<script>
  // 获取所有符合条件的b元素
  const boldElements = document.querySelectorAll('.parent.element h5 b');
  // 遍历每个元素并提取文本
  boldElements.forEach(element => {
    console.log(element.textContent);
  });
  // 依次输出: text1, text2
</script>