獲得兒童元素的價值

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> 

Answer 2

document.querySelectorAll將成為你的朋友。 您需要識別.inProgressGrade下面的所有b元素。 您還必須使用循環來遍歷所有元素，因為有多個元素。

 var els = document.querySelectorAll(".inProgressGrade b"); var vals = []; for(var i in els) { if (els[i] && els[i].innerText) vals.push(els[i].innerText); } for(var i in vals) { console.log(vals[i]); } 

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

Answer 3

.getElementsByClassName()返回一個數組，因此你必須遍歷它。 之后，您需要做的就是使用.innerText來獲取其“值”。

 (function() { const allTds = document.getElementsByClassName('inProgressGrade'); //get all td-elements for which you want the value var values = []; for (let i = 0; i < allTds.length; ++i) { const bEl = allTds[i].getElementsByTagName('b')[0]; // takes the first b-element, you'll need another loop if there are multiple /* Since <b> is an inline element it will be part of its parents innerText */ const textWithChild = allTds[i].innerText; const text = textWithChild.substring(0, textWithChild.length - bEl.innerText.length - 1); console.log(`The value of ${bEl.innerText} is <${text}>`); } })() 

 <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>