I'm currently transitioning from using jQuery to pure JavaScript, and I've just started but am encountering difficulties. Specifically, I am unsure how to select child elements in the DOM.
<div class="row-button">
<input type="submit" />
</div>
I attempted the following code, but it resulted in error messages being displayed.
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]')
Alternatively, I thought maybe I need to ensure that the DOM is fully loaded before accessing it. Thus, I added a window.onload function to make this guarantee.
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]')
}