CODEWITHSUNDEEP
javascripthtml
Emdelin
Emdelin

Reputation: 23

Plain javascript selector for html element without html markup

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! :)

Upvotes: 1

Views: 69

Answers (1)

connexo
connexo

Reputation: 56754

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.

Upvotes: 1

Related Questions