I am learning the basics of HTML. I have the following code:
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>I expected the result to be true, since the first element of the first <div> is a <label>, which contains a string of non-zero length. The actual result is false, however. Why?
You are using childNodes, which retrieves all children, including text:
childNodesincludes all child nodes—including non-element nodes like text and comment nodes. To get a collection of only elements, useElement.childreninstead.
Thus, document.querySelector('div:nth-child(1)').childNodes[0] gives you the text that is between the <div> and the <label>, which stripped has no length. Instead, you should use children, which gets the child elements.
For example:
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>When I used your code it seems that the spaces between <div> and <label>Name</label><br/> counts as text. Because of this document.querySelector('div:nth-child(1)').childNodes[0].textContent.trim().length>0 checks the length of the space. Try and remove the spaces in the HTML and the error should disappear.
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>