Estoy creando una aplicación de una sola página en la que todas las páginas se solicitan a través de fetch api. El problema es que, después de obtener contenido con éxito, no puedo acceder al uso de document.querySelector() o document.querySelectorAll() y cuando trato de verificar si div con class mainCont está vacío o no, como se muestra en los códigos a continuación, devuelve nodos secundarios vacíos mientras que el contenido de la búsqueda (datos) se muestra en la ventana de los usuarios, pero no en el código fuente del documento.
const mainCont = document.querySelector('.mainCont'); const pathnamesList = ['', 'index', 'logout', 'profile', 'security', 'setting']; const wP = window.location.pathname; const pathnameSplit = wP.split('/', 3)[1]; /* -- fetch request -- */ async function loadViews(url) { const response = await fetch(url) .then(response => response.text()) .then(data => { mainCont.innerHTML = data; }).catch((error) => console.log(error)); return; } /* -- // -- */ if (pathnamesList.indexOf(pathnameSplit) !== -1 && wP !== '/') { document.title = `demoDomain | ${pathnameSplit}`; loadViews(`${pathnameSplit}.html`); if (mainCont.childElementCount == 0) { console.log('Empty div'); }else { console.log(mainCont.childNodes); } console.info(pathnameSplit); } else { console.error('No such directory'); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="index.css"> </head> <body> <div class="mainCont"> </div> <script src="route.js"></script> <script src="main.js"></script> </body> </html>¿Hay alguna forma posible de acceder a esos enlaces (elementos DOM) desde la API de búsqueda a través de javascript de vainilla? Imagen de los elementos que se han obtenido con éxito pero sus códigos fuente no se muestran en las páginas fuente
