无 html 标记的 html 元素的普通 javascript 选择器

Question

I'm working on a small project where I'd to read how many times a monster has been killed by a specific player. I'm able to create most of the selectors (monster name, player name) when using the document.querySelector or document.querySelectorAll. But when I want to retrieve the amount of kills I'm stuck. Also Googling for selectors of plain text, or text without HTML markup. Unfortunately I have no results.

To give you an idea how it looks like I will give a small example. The HTML looks exactly like this, but then you have 6 player names list and for each player the amount of kills for this specific monster.

<table>
<tr>
<td><b>Name of the monster</b></td>
<td><b><a href="#">Name of the player</a></b>"Amount of kills"<br></td>
</tr>
</table>

So I want to get the selector of the text that mentions the Amount of kills. I will then convert this string to a number.

My idea is to create a tracker to see what players are actually hunting. For example player X kills 500 dragons, then I want my script to display this.

Thanks in advance: :)

Answer 1

Here's one way:

 const cell = document.querySelector('table tr td:last-child'); console.log([...cell.childNodes].filter(n=>n.nodeType===3).pop().nodeValue);

 <table> <tr> <td><b>Name of the monster</b></td> <td><b><a href="#">Name of the player</a></b>"Amount of kills"<br></td> </tr> </table>

It finds the table cell you need, and reads all childNodes (this includes textNodes (nodeType is 3 then)), filters for all textNodes and pops the last one, reading its value.