How to use getElementsByClassName in JavaScript?

Question

Here's the HTML code:

<html>
    <body>
     <div id="wrapper">
        <div id="c_wrapper">
          <div class="member">
             <form name="f1">
             </form>
          </div>
        </div>
     </div>
    </body>
</html>

My JavaScript

var c_wrapper = document.getElementById("c_wrapper");
var mem = c_wrapper.getElementsByClassName("member");
var f = mem.lastChild;

When I log out variable 'f.tagName' to the console,I get the result of undefined value. What's wrong with this?

Do I need to get the outer-most element first?

[`.getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) returns a [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) which has no property `lastChild` — Andreas, Aug 17 '15 at 11:39
Based title + self-awareness. You don't see this every day... — BoltClock, Aug 17 '15 at 11:40

potatopeelings · Answer 1 · 2015-08-17T11:43:08.327

getElementsByClassName returns an array-like object of all child elements. lastChild is a property of a node

You should be doing lastChild on a node

var f = c_wrapper.lastChild

with HTML (I just removed the whitespaces for illustration so that you don't get blank text nodes)

<div id="wrapper">
    <div id="c_wrapper"><div class="member"><form name="f1"></form></div></div>
</div>

Or using indices to get the last element in the array.

var f = mem[mem.length - 1]

How to use getElementsByClassName in JavaScript?

1 Answers1