En un archivo CSS, puedo especificar elementos con un nombre de clase específico que se encuentran dentro de un div con una ID específica como:
<div id="container1"> <div class="innerBox">Box A</div> <div class="innerBox">Box B</div> </div> <div id="container2"> <div class="innerBox">Box C</div> <div class="innerBox">Box D</div> </div> #container1 .innerBox { /* formatting */ }Entonces, aquí, solo se formatearían las casillas A y B.
Mi pregunta es: en un archivo JS, ¿cómo puedo usar document.querySelector() para encontrar elementos con un nombre de clase específico que se encuentran dentro de un div con una ID específica? Ex:
var selectedItems = document.querySelector("#container1 .innerBox");Me confundí sobre cómo se debe formatear el argumento.
Además, dado que la clase interna variará, pero el div externo siempre será el mismo, intenté usar el siguiente código (sin éxito):
function AddItem(boxClass) { var boxChosen = document.querySelector("#outer-panel ." + boxClass); }Creo que necesita querySelectorAll para obtener todos los elementos que coincidan con la condición, luego use un bucle for para hacer lo que quiera.
function AddItem(boxClass) { // use `querySelectorAll` to get all elements. var boxChosen = document.querySelectorAll("#container2 ." + boxClass); return boxChosen } const elements = AddItem("innerBox") for (let i = 0; i < elements.length; i++) { // do something you want. elements[i].style.backgroundColor = 'blue' console.log(elements[i]) } <div id="container1"> <div class="innerBox">Box A</div> <div class="innerBox">Box B</div> </div> <div id="container2"> <div class="innerBox">Box C</div> <div class="innerBox">Box D</div> </div>Funciona igual que los selectores de CSS.
Si desea seleccionar todos los elementos con clase .innerBox dentro de div #container1 use querySelectorAll()
document.querySelectorAll("#container1 .innerBox"); si desea seleccionar todos los elementos con la clase .innerBox dentro de cualquier div
document.querySelectorAll("div .innerBox");