Tengo un archivo txt con un listado de referencias a elementos del DOM ('div'), quiero pasarlos a un array para acceder a ellos, pero al pasarlos quedan como un string y no como una coleccion de objetos.
Este es el contenido de mi archivo txt; del que estoy intentando sacar las referencias al dom.
"[document.querySelector('.c0 .f0'),
document.querySelector('.c0 .f1'),
document.querySelector('.c0 .f2'),
document.querySelector('.c0 .f3'),
document.querySelector('.c0 .f4'),
document.querySelector('.c0 .f5'),
document.querySelector('.c0 .f6'),
document.querySelector('.c0 .f7'),
document.querySelector('.c0 .f8'),
document.querySelector('.c0 .f9'),
document.querySelector('.c0 .f10'),
document.querySelector('.c0 .f11')],
[document.querySelector('.c1 .f0'),
document.querySelector('.c1 .f1'),
document.querySelector('.c1 .f2'),
document.querySelector('.c1 .f3'),
document.querySelector('.c1 .f4'),
document.querySelector('.c1 .f5'),
document.querySelector('.c1 .f6'),
document.querySelector('.c1 .f7'),
document.querySelector('.c1 .f8'),
document.querySelector('.c1 .f9'),
document.querySelector('.c1 .f10'),
document.querySelector('.c1 .f11')],
[document.querySelector('.c2 .f0'),
document.querySelector('.c2 .f1'),
document.querySelector('.c2 .f2'),
document.querySelector('.c2 .f3'),
document.querySelector('.c2 .f4'),
document.querySelector('.c2 .f5'),
document.querySelector('.c2 .f6'),
document.querySelector('.c2 .f7'),
document.querySelector('.c2 .f8'),
document.querySelector('.c2 .f9'),
document.querySelector('.c2 .f10'),
document.querySelector('.c2 .f11')],
[document.querySelector('.c3 .f0'),
document.querySelector('.c3 .f1'),
document.querySelector('.c3 .f2'),
document.querySelector('.c3 .f3'),
document.querySelector('.c3 .f4'),
document.querySelector('.c3 .f5'),
document.querySelector('.c3 .f6'),
document.querySelector('.c3 .f7'),
document.querySelector('.c3 .f8'),
document.querySelector('.c3 .f9'),
document.querySelector('.c3 .f10'),
document.querySelector('.c3 .f11')],
[document.querySelector('.c4 .f0'),
document.querySelector('.c4 .f1'),
document.querySelector('.c4 .f2'),
document.querySelector('.c4 .f3'),
document.querySelector('.c4 .f4'),
document.querySelector('.c4 .f5'),
document.querySelector('.c4 .f6'),
document.querySelector('.c4 .f7'),
document.querySelector('.c4 .f8'),
document.querySelector('.c4 .f9'),
document.querySelector('.c4 .f10'),
document.querySelector('.c4 .f11')],
[document.querySelector('.c5 .f0'),
document.querySelector('.c5 .f1'),
document.querySelector('.c5 .f2'),
document.querySelector('.c5 .f3'),
document.querySelector('.c5 .f4'),
document.querySelector('.c5 .f5'),
document.querySelector('.c5 .f6'),
document.querySelector('.c5 .f7'),
document.querySelector('.c5 .f8'),
document.querySelector('.c5 .f9'),
document.querySelector('.c5 .f10'),
document.querySelector('.c5 .f11')],
[document.querySelector('.c6 .f0'),
document.querySelector('.c6 .f1'),
document.querySelector('.c6 .f2'),
document.querySelector('.c6 .f3'),
document.querySelector('.c6 .f4'),
document.querySelector('.c6 .f5'),
document.querySelector('.c6 .f6'),
document.querySelector('.c6 .f7'),
document.querySelector('.c6 .f8'),
document.querySelector('.c6 .f9'),
document.querySelector('.c6 .f10'),
document.querySelector('.c6 .f11')],
[document.querySelector('.c7 .f0'),
document.querySelector('.c7 .f1'),
document.querySelector('.c7 .f2'),
document.querySelector('.c7 .f3'),
document.querySelector('.c7 .f4'),
document.querySelector('.c7 .f5'),
document.querySelector('.c7 .f6'),
document.querySelector('.c7 .f7'),
document.querySelector('.c7 .f8'),
document.querySelector('.c7 .f9'),
document.querySelector('.c7 .f10'),
document.querySelector('.c7 .f11')]"
Aqui el archivo html con el que estoy trabajando; lo que quiero hacer es acceder a los div desde el script sin colocar todas las referencias a cada div en el codigo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lectura Escritura De Archivos</title>
<style type="text/css" media="all">
*{
box-sizing: content-box;
}
html {
font-size: 16px;
}
body {
width: 100%;
padding: 1%;
}
#tablaDatos{
width: 100%;
display: flex;
flex-grow: 1;
flex-basis: 0;
justify-content: space-between;
}
.columna {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 0;
}
.celda {
height: 3rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: space-around;
border: solid 0.05rem #999;
}
.celda div:first-child {
color: blue;
align-self: flex-start;
}
.celda div:last-child {
color: red;
align-self: flex-end;
}
@media screen and (max-width: 480px){
html{
font-family: Sans-Serif;
font-size: 10px;
}
body{
margin: 1rem auto;
background-color: #F6F6F6;
color: #333;
}
}</style>
<script type="text/javascript" charset="utf-8" src='script.js'></script>
</head>
<body>
<div id="tablaDatos">
<div class="columna c0">
<div class="celda f0">
<div>HORA</div>
<div>DIA</div>
</div>
<div class="celda f1"></div>
<div class="celda f2"></div>
<div class="celda f3"></div>
<div class="celda f4"></div>
<div class="celda f5"></div>
<div class="celda f6"></div>
<div class="celda f7"></div>
<div class="celda f8"></div>
<div class="celda f9"></div>
<div class="celda f10"></div>
<div class="celda f11"></div>
</div>
<div class="columna c1">
<div class="celda f0"></div>
<div class="celda f1"></div>
<div class="celda f2"></div>
<div class="celda f3"></div>
<div class="celda f4"></div>
<div class="celda f5"></div>
<div class="celda f6"></div>
<div class="celda f7"></div>
<div class="celda f8"></div>
<div class="celda f9"></div>
<div class="celda f10"></div>
<div class="celda f11"></div>
</div>
<div class="columna c2">
<div class="celda f0"></div>
<div class="celda f1"></div>
<div class="celda f2"></div>
<div class="celda f3"></div>
<div class="celda f4"></div>
<div class="celda f5"></div>
<div class="celda f6"></div>
<div class="celda f7"></div>
<div class="celda f8"></div>
<div class="celda f9"></div>
<div class="celda f10"></div>
<div class="celda f11"></div>
</div>
<div class="columna c3">
<div class="celda f0"></div>
<div class="celda f1"></div>
<div class="celda f2"></div>
<div class="celda f3"></div>
<div class="celda f4"></div>
<div class="celda f5"></div>
<div class="celda f6"></div>
<div class="celda f7"></div>
<div class="celda f8"></div>
<div class="celda f9"></div>
<div class="celda f10"></div>
<div class="celda f11"></div>
</div>
<div class="columna c4">
<div class="celda f0"></div>
<div class="celda f1"></div>
<div class="celda f2"></div>
<div class="celda f3"></div>
<div class="celda f4"></div>
<div class="celda f5"></div>
<div class="celda f6"></div>
<div class="celda f7"></div>
<div class="celda f8"></div>
<div class="celda f9"></div>
<div class="celda f10"></div>
<div class="celda f11"></div>
</div>
<div class="columna c5">
<div class="celda f0"></div>
<div class="celda f1"></div>
<div class="celda f2"></div>
<div class="celda f3"></div>
<div class="celda f4"></div>
<div class="celda f5"></div>
<div class="celda f6"></div>
<div class="celda f7"></div>
<div class="celda f8"></div>
<div class="celda f9"></div>
<div class="celda f10"></div>
<div class="celda f11"></div>
</div>
<div class="columna c6">
<div class="celda f0"></div>
<div class="celda f1"></div>
<div class="celda f2"></div>
<div class="celda f3"></div>
<div class="celda f4"></div>
<div class="celda f5"></div>
<div class="celda f6"></div>
<div class="celda f7"></div>
<div class="celda f8"></div>
<div class="celda f9"></div>
<div class="celda f10"></div>
<div class="celda f11"></div>
</div>
<div class="columna c7">
<div class="celda f0"></div>
<div class="celda f1"></div>
<div class="celda f2"></div>
<div class="celda f3"></div>
<div class="celda f4"></div>
<div class="celda f5"></div>
<div class="celda f6"></div>
<div class="celda f7"></div>
<div class="celda f8"></div>
<div class="celda f9"></div>
<div class="celda f10"></div>
<div class="celda f11"></div>
</div>
</div>
</body>
</html>
El codigo del script que estoy usando, primero obtengo los datos del archivo de texto; luego los voy agregando a un arreglo; el problema es que los datos que se pasan al arreglo quedan como string y no como referencias al DOM.
//===================================================================================================
window.addEventListener('load', domIniciado);
function domIniciado(){
const objetosDom =[];
const xhr = new XMLHttpRequest();
let archivoTexto = "";
let pasaTexto = [];
xhr.open('GET', 'ArrayObjetos.txt', true);
xhr.send();
xhr.onreadystatechange = () => {
if(xhr.readyState == 4 && xhr.status == 200){
archivoTexto = xhr.responseText;
console.log(archivoTexto);
let i = 0;
let j = 0;
let k = 0;
let elementoDom = "";
for(i = 0; i <= archivoTexto.length; i++){
//console.log (i);
//console.log(archivoTexto.charAt(k));
if(archivoTexto.charAt(i) === '['){
k = i + 1;
elementoDom = "";
while(archivoTexto.charAt(k) !== ']'){
elementoDom += archivoTexto.charAt(k);
k++;
}
JSON.parse( JSON.stringify( elementoDom ) );
objetosDom[j] = [elementoDom];
j++;
}
}
console.log(objetosDom);
}
}
}
Quiero importar las referencias desde un txt a un arreglo usando javascript.
No se como hacerlo.
Gracias por la ayuda que me puedan dar estoy iniciando en esto de la programacion.
document.querySelectorAll( ".columna .celda" )
y allí tendrás todos los elementos HTML. Sin embargo, si lo que quieres es poder hacer clic sobre uno de los elementos para realizar una acción, como seleccionar algo, considere utilizar eventos delegados (versión en inglés). Al menos, aquí se explica de forma sencilla.