javascript - 获取子元素的值(value)

Question

我正在编写可应用于网页的代码。我想获取“A”的值作为变量。我试过:

document.getElementById("inProgressGrade");

和

document.getElementsByClassName("b");

这是我从中提取的代码，使它更复杂，我想要获得的所有值都具有相同的类。

<td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
90.62% 
<b>A</b>
</td>

同一网页上的另一个:

<td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
87.10% 
<b>B</b>
</td>

console.log(document.getElementsByClassName("b"));

<td style="width:60px; border: 1px solid #ABABAB;              padding: 2px;" class="inProgressGrade">87.10% <b>B</b></td>

console.log(document.getElementsByClassName("inProgressGrade"));

<td style="width:60px; border: 1px solid #ABABAB;              padding: 2px;" class="inProgressGrade">87.10% <b>B</b></td>

Answer 1

您可以将 .querySelector() 与 textContent 一起使用，就像:

document.querySelector('.inProgressGrade b').textContent

console.log(document.querySelector('.inProgressGrade>b').textContent);

<table>
  <tr>
    <td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
      90.62%
      <b>A</b>
    </td>
  </tr>
</table>

如果你想要这两个字母，你可以使用 .querySelectorAll() 循环，比如:

var letters = document.querySelectorAll('.inProgressGrade b');

for( var i = 0; i < letters.length; i++) {
    console.log( letters[i].textContent );
}

代码:

var letters = document.querySelectorAll('.inProgressGrade b');

for (var i = 0; i < letters.length; i++) {
  console.log(letters[i].textContent);
}

<table>
  <tr>
    <td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
      90.62%
      <b>A</b>
    </td>
    <td style="width:60px; border: 1px solid #ABABAB; padding: 2px;" class="inProgressGrade">
      87.10%
      <b>B</b>
    </td>
  </tr>
</table>