时间戳

首页 > 解决方案 > 显示 HTML 元素计数

javascript - 显示 HTML 元素计数

问题描述

我正在使用用户故事进行免费代码营项目，需要最少数量的不同元素。

我想出了使用一些页面来显示元素计数的想法，并认为它很容易实现。我知道的著名的遗言。

花了几个小时查看 MDN、W3、W3Schools、……示例和文档。也在这里搜索。

我试过使用 botj javascript 和 jQuery 并且可以在 javascript 中得到结果，但它们是不正确的。jQuery 的东西根本不起作用。


<head>
        <script src= 
            "https://code.jquery.com/jquery-2.2.4.min.js"> 
        </script>

        <script src=
        "https://code.jquery.com/jquery-3.5.0.js">
        </script>
  
</head>

<body>

<!-- much deletia -->

        <div class="ToC">
            <div>
                <table>
                    <tr>
                        <th colspan="2">HTML Element Use</th>
                    </tr>
                    <tr>
                        <td>Name</td><td>Count</td>
                    </tr>
                    <tr>
                        <td>Total</td><td><script>document.write(HTMLCollection.length)</script></td>
                    </tr>
                    <tr>
                        <td>p</td><td><script>document.write(document.getElementsByTagName('p').length);</script></td>
                    </tr>
                    <tr>
                        <td>div</td><td><script>document.write($( div ).length;)</script></td>
                    </tr>
                </table>
            </div>
        </div>

<!-- even more deletia -->

</body>

我究竟做错了什么？

标签： javascripthtmljquery

解决方案

var divCnt = document.getElementsByTagName('div').length
var pCnt = document.getElementsByTagName('p').length
var tCnt = document.getElementsByTagName('*').length

document.getElementById('total').innerHTML = tCnt;

document.getElementById('div').textContent = divCnt;
document.getElementById('p').innerHTML = pCnt;
<head>
        <script src= 
            "https://code.jquery.com/jquery-2.2.4.min.js"> 
        </script>

        <script src=
        "https://code.jquery.com/jquery-3.5.0.js">
        </script>
  
</head>

<body>

<!-- much deletia -->

        <div class="ToC">
            <div>
                <table>
                    <tr>
                        <th colspan="2">HTML Element Use</th>
                    </tr>
                    <tr>
                        <td>Name</td><td>Count</td>
                    </tr>
                    <tr>
                        <td>Total</td><td id='total'></td>
                    </tr>
                    <tr>
                        <td>p</td><td id='p'></td>
                    </tr>
                    <tr>
                        <td>div</td><td id='div'></td>
                    </tr>
                </table>
            </div>
        </div>

<!-- even more deletia -->

</body>

推荐阅读