Soy bastante nuevo en la programación y estoy tratando de desarrollar una extensión de Chrome. El sitio web que estoy tratando de manipular tiene un elemento div y dentro de este div hay múltiples divs y el número de estos divs varía según la escala del primer div y el usuario puede arrastrar la escala. Mi problema es que necesito declarar cada una de estas variables y hacer que un observador de mutaciones las observe en busca de cambios. Entonces, si un usuario tiene 8 div allí, cada div debe declararse como una variable y tener un observador de mutaciones observándolo. A continuación se muestra mi código:
function tester() { var child = document.querySelector("#__APP > div > div:nth-child(3) > div > div > div.react-grid-layout.layout > div:nth-child(5) > div > div.css-q57e4p > div > div > div.list-container.css-1kq4s3b > div.list-auto-sizer > div > div"); var childnodesofchild = [child.childNodes]; var divs = []; console.log(childnodesofchild[0]); childnodesofchild[0].forEach(consoler); function consoler() { //this is the problem span1 = document.getElementsByClassName("text right")[0]; const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { var spantext = span1.textContent; var spandiv = span1.parentNode; if (mutation.addedNodes) { if (spantext > avg) { spandiv.style.backgroundColor = "#E8E8E8" spandiv.style.color = "black"; spandiv.style.opacity = "0.7"; } if (spantext < avg) { spandiv.style.backgroundColor = "black"; spandiv.style.color = "white"; spandiv.style.opacity = "1"; } } }) }); const options = { childList: true, subtree: true, attributes: true, characterData: true }; observer.observe(span1, options); } }Todavía no estoy 100% seguro de cuál es tu pregunta. Pero aquí, escribí un ejemplo rápido de cómo puedes declarar algunos divs en un bucle y alterar sus propiedades en un bucle. Espero que esto sea útil.
let colors = ['red','green','blue']; let innerText = ['A','B','C']; for (let i = 0; i < colors.length; i++) { let testDiv = document.createElement('div'); testDiv.className = 'test'; testDiv.style = 'width: 100px; height: 50px; line-height: 50px; text-align: center; color: white;'; testDiv.style.backgroundColor = colors[i]; testDiv.innerHTML = innerText[i]; document.body.appendChild(testDiv); } document.getElementById('testBtn').onclick = function() { let testDivs = document.querySelectorAll('.test'); for (let i = 0; i < testDivs.length; i++) { testDivs[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; } } <button id="testBtn">Change Div Colors</button>