The Problem

I'm using the DIVI theme and am simply attempting to get a reference to the mobile menu's ul element (this has a class of 'et_mobile_menu'). Up until now I've not had any issues getting references in javascript, but this particular one always seems to be undefined/null.

What I've attempted

I tried it in a setTimeout and it worked (it found the element with no problems). So, I tried it using:

document.addEventListener('DOMContentLoaded', function() {
    let el = document.querySelector('.et_mobile_menu');
});

This didn't work. So I gave onload a try:

window.onload = function() {
    let el = document.querySelector('.et_mobile_menu');
}

Again, this didn't work so I tried using JQuery like this...

$(document).ready(function () {
    let el = document.querySelector('.et_mobile_menu');
});

Now this did work... every time the reference was valid.

More Information

I'm using a simple DIVI child theme which I created, and my javascript file is being enqueued in the footer. I've specified 'jquery' as a dependency and have tried add_actions() with different priorities. (I've also tried this with getElementsByClassName())

Summary

I'm curious, is there something specific with Wordpress that I'm missing or is there more I can do to pinpoint the reason the JQuery 'ready' function works here but the vanilla JS methods don't?