计算一个ul的直接子元素，不包括脚本标记

Counting the direct children of a ul, excluding a script tag

本文关键字：元素 不包括 脚本 一个 ul 计算      更新时间：2023-09-26

下面是我的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

如果您有兴趣阅读父元素 id list的<li>子元素的计数，我猜这是最接近的，你会得到做它与/香草javascript…

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

然而，我也强烈建议你(就像许多其他人已经建议你的那样)考虑使用jquery进行DOM操作，而不是普通的旧javascript…

如果你想要所有的子元素没有任何<script>标签元素，这可以派上用场(它不过滤<script>标签，但它通过过滤掉标签与特定的type属性text/javascript，仅由<script>标签使用;))

var nodes = document.querySelectorAll('#list > *:not([type="text/javascript"])');
alert(nodes.length);

将脚本标签移出<ul>。它将使你的代码有效，更明智，并将使它做你想做的。

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

因为script tag是#list的子元素

相关文章：