javascript - 如何修复错误 : expected false to equal true html

Question

我正在学习 HTML 的基础知识。我有以下代码:

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>

我预计结果是 true ，从第一个 <div> 的第一个元素开始是 <label> ，其中包含一个非零长度的字符串。实际结果为false ， 然而。为什么？

Answer 1

您正在使用 childNodes ，它检索所有子项，包括文本:

childNodes includes all child nodes—including non-element nodes like text and comment nodes. To get a collection of only elements, use Element.children instead.

因此，document.querySelector('div:nth-child(1)').childNodes[0]为您提供 <div> 之间的文本和 <label> ，剥离后没有长度。相反，您应该使用 children ，它获取子元素。

例如:

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>