Mi estructura HTML es así:
<div container> <div child_container> <span 1> 1 </span> <span 2> 2 </span> </div child_container>> <span 3> 3 </span> <span 4> 4 </span> </div container>Quiero contar el tramo 3 y el tramo 4 dentro de mi contenedor. No los intervalos dentro de child_container .
He probado varias cosas:
Esto contará todo dentro del contenedor :
var countElementsAfter = columnNamesOverview_comparison_values.getElementsByTagName("span").length;Esto no funcionará:
var countElementsAfter = columnNamesOverview_comparison_values.getElementsByTagName("span").childNodes[0]length;Y este, el resultado sigue siendo 1, aunque tengo dos elementos:
var countElementsAfter1 = columnNamesOverview_comparison_values.getElementsByTagName("span"); var k = []; for (var i=0, len=c.length; i<len; ++i) { k[k.length] = c[i]; }¿Cómo puedo contar los elementos span en mi contenedor sin contar los elementos secundarios?
Puede usar document.querySelectorAll que puede usar el selector css
const spans = document.querySelectorAll("#container > span") console.log(spans.length) <div id="container"> <div id="child_container"> <span 1> 1 </span> <span 2> 2 </span> </div> <span 3> 3 </span> <span 4> 4 </span> </div>en caso de que no pueda tener un selector para el elemento principal (y, por lo tanto, no pueda seleccionar su elemento secundario específicamente), puede recorrer sus elementos secundarios y filtrar
const container = document.querySelector("#container") const spans = Array.from(container.children) .filter(child => child.tagName === "SPAN") console.log(spans.length) <div id="container"> <div id="child_container"> <span 1> 1 </span> <span 2> 2 </span> </div> <span 3> 3 </span> <span 4> 4 </span> </div>