Finalmente pude resolverlo, y quiero compartir la solución para que le sirva a alguien que tenga una inquietud similar, y también porque me interesa si algún usuario más avanzado me puede brindar alguna alternativa un poco más "elegante".
He usado un ejemplo, en este caso hay dos funciones, una que crea un elemento y lo muestra en el DOM y otra que lo manipula.
Si ejecutamos una abajo de la otra el error es que la segunda función no puede "capturar" el elemento creado, ya que se ejecutan al mismo tiempo.
En contexto "real" no tiene sentido ya que sería más fácil hacer ambas cosas en una sola función y no tendríamos el problema planteado.
Entonces el contexto en el cual esta solución sirve, es cuando por alguna razón generamos dinámicamente los elementos en el DOM, y mediante otra función queremos hacer algo con estos, ya sea modificar su estilo, agregar un evento, o lo que fuera.
//El setTimeout está a propósito, con el fin de simular la demora de la función de ejemplo.
const addElement = (callback) => {
setTimeout(() => {
const $h1 = document.createElement("h1");
$h1.innerText = "Título";
document.body.appendChild($h1);
callback();
}, 2000)
}
const addStyle = () => {
$title = document.querySelector("h1");
$title.style.color = "white";
$title.style.backgroundColor = "blue";
}
addElement(addStyle);
He aquí una alternativa que me ha funcionado tambien, un poco más engorroso pero efectiva.
//Creo una variable que podré manipular cuando la primera función se haya ejecutado.
let ready = false;
//Creo la primera función, al terminar todas las instrucciones modifico a "true" el valor de la variable que creé anteriormente.
//El setTimeout es para simular la demora de la ejecución de esta función
const addElement = () =>{
setTimeout(()=>{
const $h1 = document.createElement("h1");
$h1.innerText = "Título";
document.body.appendChild($h1);
ready = true; //Modifico el valor de la variable
},2000)
}
//Creo la segunda función
const addStyle = () =>{
$title = document.querySelector("h1");
$title.style.color = "white";
$title.style.backgroundColor = "blue";
}
//Ejecuto la primer función
addElement();
//Creo un setInterval, el cual evaluará en cada vuelta el estado de la variable "ready", cuando esta sea true (Es decir, cuando la primera función haya acabado) iniciará la segunda función y finalmente terminamos el bucle con clearInterval()
const timer = setInterval(()=>{
if (ready == true) {
addStyle();
clearInterval(timer);
}
},500)