Getting the last class name in plain js

Question

I can't seem to find a post related to this topic on here or on other websites that is not jQuery based. I need a plain JavaScript solution to do what I need to do.

OK so I need to get the last class name element without using something like this

document.querySelectorAll('.name')[7].innerHTML;

I need a method that don't require me counting and selecting the last class name by the count number between the square brackets like the example above. The reason why is let's just say I

have 100s of elements on the page with the class name call name I wouldn't want use the above example structure for that situation.

My code where I'm stuck at

//????? I will like the last class name to be outputted in a alert but how?
/*alert(last_class_name);*/

  <h1 class='name'>Adam</h1>
  <h1 class='name'>Bob</h1>
  <h1 class='name'>Cindy</h1>
  <h1 class='name'>Danny</h1>
  <h1 class='name'>Eddy</h1>
  <h1 class='name'>Frank</h1>
  <h1 class='name'>George</h1>
  <h1 class='name'>Henry</h1>

NOTE:

Problem solved look at my answer and Alexander Nied's answer to better understand the answer.

use `var someElementsItems = document.querySelectorAll(".name"); console.log(someElementsItems[someElementsItems.length -1])` — Just code, Oct 26 '18 at 05:32

score 5 · Accepted Answer · answered Oct 26 '18 at 05:32

5

You could grab the names in one query then simply grab by index of the total length minus 1, as seen below:

let names = document.querySelectorAll('.name');
let last = names[names.length-1];
console.log(last);

  <h1 class='name'>Adam</h1>
  <h1 class='name'>Bob</h1>
  <h1 class='name'>Cindy</h1>
  <h1 class='name'>Danny</h1>
  <h1 class='name'>Eddy</h1>
  <h1 class='name'>Frank</h1>
  <h1 class='name'>George</h1>
  <h1 class='name'>Henry</h1>

answered Oct 26 '18 at 05:32

Alexander Nied

12,804
4
25
45

Thanks for responding I actually was interested in your example but I could not put it an alert it just says [object HTMLHeadingElement] after I put this let names = document.querySelectorAll('.name'); let last = names[names.length-1]; alert(last); – Oct 26 '18 at 06:51
I figure it out let names = document.querySelectorAll('.name'); let last = names[names.length-1]; alert(last.innerHTML); Thank you for helping me out. I will reward some one for the best answer soon I have to see which person's answer I like more I'll get back to you guys soon. – Oct 26 '18 at 07:25

Jhecht · Answer 2 · 2018-10-26T05:46:39.827

2

The following code uses a trick because what is returned by document.querySelectorAll() is a NodeList, and does not have the normal functions of an array such as .pop().

This trick converts the NodeList into an Array so that you can call .pop()

The other way to do so is the same way that Alexander Nied has commented just before I managed to finish this answer.

let arr = [].slice.apply(document.querySelectorAll('.name'));
let lastEl = arr.pop();
console.log(lastEl.innerHTML);

<h1 class='name'>Adam</h1>
<h1 class='name'>Bob</h1>
<h1 class='name'>Cindy</h1>
<h1 class='name'>Danny</h1>
<h1 class='name'>Eddy</h1>
<h1 class='name'>Frank</h1>
<h1 class='name'>George</h1>
<h1 class='name'>Henry</h1>

Edit

Alexander has reminded me of the Spread Operator in ES6, which can turn this code into

let arr = [...document.querySelectorAll('.name')];
let lastEl = arr.pop();
console.log(lastEl.innerHTML)

<h1 class='name'>Adam</h1>
<h1 class='name'>Bob</h1>
<h1 class='name'>Cindy</h1>
<h1 class='name'>Danny</h1>
<h1 class='name'>Eddy</h1>
<h1 class='name'>Frank</h1>
<h1 class='name'>George</h1>
<h1 class='name'>Henry</h1>

edited Oct 26 '18 at 05:46

answered Oct 26 '18 at 05:33

Jhecht

4,407
1
26
44

1

Yep-- I tried this same thing with `.pop` before rediscovering that the `querySelectorAll` return is Array-_like_ but not an actual array. :) Clever idea to cast it into an array in this manner. Incidentally, if you can get away w/ ES6 syntax you can accomplish this [using the spread operator](https://stackoverflow.com/questions/7459704/in-javascript-what-is-the-best-way-to-convert-a-nodelist-to-an-array). – Alexander Nied Oct 26 '18 at 05:42
That is true, I always remember about the spread operator too late. – Jhecht Oct 26 '18 at 05:43
Thank you @Jhecht for helping me out as well. I also like your examples as well. I will reward some one for the best answer soon I have to see which person's answer I like more I'll get back to you guys soon. – Oct 26 '18 at 07:27
@fsofb for performance on larger NodeList collections, I imagine that Alexander's will be executed in less time, though I don't have a benchmark handy to prove that. – Jhecht Oct 26 '18 at 20:59

Getting the last class name in plain js

2 Answers2