【JS】取一个节点下同类子节点的常用代码([JS] take the common code of the same kind of child node under a node)

取ul下的li个数,取table下的tr个数,可能都会用取一个节点下同类子节点这类代码,特写在这里以备查。

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>取某节点下一类子节点示例</title>
    </head>

     <body onload="count();">
        <ul id="myUl">
            <li>鹰的眼睛</li>
            <li>豹的速度</li>
            <li>熊的力量</li>
            <li>人的智慧</li>
        </ul>
     </body>
</html>
<script type="text/javascript">
<!--
    function count(){
        var ul=document.getElementById("myUl");

        // 如果直接取子节点数目,则会输出9,这不是预期的li数量
        var cnt=ul.childNodes.length;
        console.log(cnt);

        // 按tagname取li集合,那就对了
        var lis=ul.getElementsByTagName('li');
        console.log(lis.length);
    }
//-->
</script>

以上粗体部分为核心。

END

————————

Take the number of Li under UL and the number of TR under table. You may use codes such as taking the same kind of child nodes under a node. A close-up is here for future reference.

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>取某节点下一类子节点示例</title>
    </head>

     <body onload="count();">
        <ul id="myUl">
            <li>鹰的眼睛</li>
            <li>豹的速度</li>
            <li>熊的力量</li>
            <li>人的智慧</li>
        </ul>
     </body>
</html>
<script type="text/javascript">
<!--
    function count(){
        var ul=document.getElementById("myUl");

        // 如果直接取子节点数目,则会输出9,这不是预期的li数量
        var cnt=ul.childNodes.length;
        console.log(cnt);

        // 按tagname取li集合,那就对了
        var lis=ul.getElementsByTagName('li');
        console.log(lis.length);
    }
//-->
</script>

The above bold part is the core.

END