pure javascript select child dom

Question

I'm learning not use jquery only pure javascript, just start and have trouble ..... how to select child dom

<div class="row-button">
    <input type="submit" />
</div>

I'm trying below code but all shows error message.

var submit_button = document.getElementsByClassName("row-button");
console.log(submit_button.nodeType); //undefined
console.log(submit_button.firstChild); // undefined
console.log(submit_button.childNodes[0]);  // TypeError: 'undefined' is not an object (evaluating 'submit_button.childNodes[0]')

or I thought maybe need to add window onload to sure dom ready so

window.onload = function () {
    var submit_button = document.getElementsByClassName("row-button");
    console.log(submit_button.nodeType); //undefined
    console.log(submit_button.firstChild); // undefined
    console.log(submit_button.childNodes[0]);  // TypeError: 'undefined' is not an object (evaluating 'submit_button.childNodes[0]')
}

Answer 1

Pay attention: it's getElement s ByClassName .

This means it returns a NodeList (an array-like object) of matching elements.

Try:

submit_button = document.querySelector(".row-button");

This will not only add support for IE8, but also return a single element, that being the first element with the desired class.

Answer 2

getElementsByClassName("row-button")

returns an array of elements of class "row-button" . So to get its first (and only in your code) child, use

 var submit_button = document.getElementsByClassName("row-button")[0];