Estoy aprendiendo los conceptos básicos de HTML. Tengo el siguiente código:
alert(document.querySelector('div:nth-child(1)').childNodes[0].textContent.trim().length > 0) <div> <label>Name</label><br/> <input type="text"><br/> <label>Password</label><br/> <input type="password"> </div> <div> <input name="gender " type="radio"> <label>Male</label> <input name="gender " type="radio"> <label>Female</label> <input name="gender " type="radio"> <label>Others</label> </div> <div> <input name="answer" type="checkbox"> <label>Answer 1</label> <input name="answer" type="checkbox"> <label>Answer 2</label> <input name="answer" type="checkbox"> <label>Answer 3</label> <input name="answer" type="checkbox"> <label>Answer 4</label> </div> <div> <input type="submit" value="Submit"> </div> Esperaba que el resultado fuera true , ya que el primer elemento del primer <div> es una <label> , que contiene una cadena de longitud distinta de cero. Sin embargo, el resultado real es false . ¿Por qué?
Está utilizando childNodes , que recupera todos los elementos secundarios, incluido el texto:
childNodesincluye todos los nodos secundarios, incluidos los nodos que no son elementos, como los nodos de texto y comentarios. Para obtener una colección de elementos únicos, useElement.childrenen su lugar.
Por lo tanto, document.querySelector('div:nth-child(1)').childNodes[0] le proporciona el texto que se encuentra entre <div> y <label> , que eliminado no tiene longitud. En su lugar, debe usar children , que obtiene los elementos secundarios.
Por ejemplo:
alert(document.querySelector('div:nth-child(1)').children[0].textContent.trim().length>0) <div> <label>Name</label><br/> <input type="text"><br/> <label>Password</label><br/> <input type="password"> </div> <div> <input name="gender " type="radio"> <label>Male</label> <input name="gender " type="radio"> <label>Female</label> <input name="gender " type="radio"> <label>Others</label> </div> <div> <input name="answer" type="checkbox"> <label>Answer 1</label> <input name="answer" type="checkbox"> <label>Answer 2</label> <input name="answer" type="checkbox"> <label>Answer 3</label> <input name="answer" type="checkbox"> <label>Answer 4</label> </div> <div> <input type="submit" value="Submit"> </div>Cuando utilicé su código, parece que los espacios entre <div> y <label>Name</label><br/> cuentan como texto. Debido a esto document.querySelector('div:nth-child(1)').childNodes[0].textContent.trim().length>0 comprueba la longitud del espacio. Pruebe y elimine los espacios en el HTML y el error debería desaparecer.
var foo = document.querySelector('div:nth-child(1)').childNodes[0].textContent.trim().length > 0; var bar= document.querySelector('div:nth-child(1)').childNodes[0]; console.log(foo); console.log(bar); <div><label>Name</label><br/><input type="text"><br/><label>Password</label><br/><input type="password"></div> <div> <input name="gender " type="radio"> <label>Male</label> <input name="gender " type="radio"> <label>Female</label> <input name="gender " type="radio"> <label>Others</label> </div> <div> <input name="answer" type="checkbox"> <label>Answer 1</label> <input name="answer" type="checkbox"> <label>Answer 2</label> <input name="answer" type="checkbox"> <label>Answer 3</label> <input name="answer" type="checkbox"> <label>Answer 4</label> </div> <div> <input type="submit" value="Submit"> </div>