Question

以下是我的HTML结构，其中包含脚本标记

<ul id="list">
    <li class="item1"><a href="#">Item 1</a></li>
    <li class="item2"><a href="#">Item 2</a></li>
    <li class="item3"><a href="#">Item 3</a></li>
    <script type='text/javascript' src="main.js"></script>
    <li class="item4"><a href="#">Item 4</a></li>
</ul>

以下是我的JS代码，以获得直接孩子的长度

var directChild =  document.getElementById('list').children;
console.log(directChild.length); // this gives me length as 5

Answer 1

只需将您的脚本标记移出<ul>即可。它将使您的代码有效，更加明智，并使其成为您想要的。

我承认，如果您坚持要在<script>中留下<ul>标记，那么来自@Pekka的评论将解决您的问题。

Answer 2

如果您有兴趣阅读ID为 list 的元素 fathered 的<li>子元素的数量，我猜这是尽可能接近w / vanilla javascript ...

var liElements = document.getElementById('list').getElementsByTagName("li"); 
alert(liElements.length);

然而，我也强烈建议您（正如许多其他人已经建议过的那样）调查使用jquery进行DOM操作而不是普通的旧javascript ...

如果您希望所有子元素没有任何<script>标记元素，这可以派上用场（它不会过滤<script>标记，但它会过滤掉具有特定{的标记。 {1}}属性type仅由text/javascript标记使用;））

<script>

如果这有帮助，请告诉我......

Answer 3

因为脚本标签是#list的子元素。

计算ul的直接子节点，不包括脚本标记

3 个答案: