Estoy tratando de verificar si un elemento seleccionado tiene texto dentro, el problema es que cuando intento verificar el valor mediante innerText , también devuelve valores del niño, por lo que la función booleana está volviendo verdadera, pero lo que espero hacer es simplemente verificar un elemento y evitar el de los niños, espero haberlo explicado correctamente, entonces, ¿cuál puede ser una forma adecuada de lograr esto?
const main = document.querySelector(".main") const first = main.querySelector(".selected") const second = main.querySelector(".another") const third = main.querySelector(".another-one") function hasText(el){ return el.innerText != "" } console.log(hasText(first),hasText(second),hasText(third)) // true true true expected result is = [true false,true] <div class="main"> <div class="selected"> i have text inside me </div> <div class="another"> <div class="child">i am inside a child</div> </div> <div class="another-one"> i am inside another one <div class="child">i am inside a child</div> </div> </div>Hay varias opciones para conseguir tu objetivo. Simplemente puede verificar si el tiene elementos secundarios y, en caso de que .children.length > 0 , simplemente considérelo como un contenedor de texto y mida su longitud de texto innerText .
Pero en caso de que se suponga que esos elementos principales contienen opcionalmente tanto elementos secundarios como texto, debe verificar cada uno de sus nodos secundarios, verificar si se trata de una porción de texto y considerar que el texto es parte del contenido principal. Esos nodos serán porciones de texto escaso entre elementos secundarios legítimos.
También está la propiedad textContent de Node que podría brindarle una información similar a la que devuelve mi función grabPureTextContent , pero hay advertencias que preferí cortar implementando mi propia lógica.
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
Aquí hay una demostración que agrega dicha función a su código y usa su lógica para determinar si un elemento dado tiene contenido de texto o no.
Agregué un tercer caso (.special) que muestra lo que sucede cuando hay contenido mixto.
const main = document.querySelector(".main") const first = main.querySelector(".selected") const second = main.querySelector(".another") const third = main.querySelector(".special") /* Returns the pure text content defined in el looping through its childNodes and concatenating content, (if child is text only) before returning the whole string. There's also the option to use textContent property of Node https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent But here the algorithm is more clear on what's going on */ function grabPureTextContent(el){ let content = ''; for(childText of el.childNodes){ if (childText.constructor.name == 'Text'){ content += childText.nodeValue.trim(); } } return content; } function hasText(el){ if (grabPureTextContent(el).length > 0) return true; return false; } console.log(hasText(third)) //=> true console.log(hasText(second)) //=> false console.log(hasText(third)) //=> true .main > div { border: solid 1px gray; margin-bottom: 1em; } .container { background: lightgreen; } .child { background: lightpink; } <div class="main"> <div class="container selected"> i have text inside me </div> <div class="container another"> <div class="child">i am inside a child</div> </div> <!-- special case having both children and text --> <div class="container special"> <div class="child">i am inside a child</div> TEXT HERE after child </div> </div>Probaría si hay algunas etiquetas dentro de la cadena. Si no, puede usar su cheque si está vacío.
const main = document.querySelector(".main") const first = main.querySelector(".selected") const second = main.querySelector(".another") const third = main.querySelector(".another2") function hasText(el) { const pattern = /<.*>.*<\/.*>/; return pattern.test(el.innerHTML) ? false : (el.innerText != ""); } console.log(hasText(first),hasText(second), hasText(third)) // true true expected result is = [true false true] <div class="main"> <div class="selected"> i have text inside me </div> <div class="another"> <div class="child">i am inside a child</div> </div> <div class="another2"> i am inside a child </div> </div>