JavaScript 函数计算 DOM 元素的数量

Question

我需要编写一个函数来计算 DOM 中元素的类型

function setNumbers(){
    var a = 0;
    var b = 0;
    var c = 0;
    var d = 0;
    var span = document.createElement('span');
    span.style.background = 'black';
    var anchors = document.getElementById('anchors');
    var buttons = document.getElementById('buttons');
    var text = document.getElementById('text');
    var events = document.getElementById('events');


    var elements = document.getElementsByTagName("*");
    for(var i =0; i<elements.length; i++){      

        if (elements[i].nodeName === 'A') {
            a++;
            span.innerHTML = "anchors - " + a;      
            span.style.border = '1px solid yellow';
            span.style.color = 'yellow';
            anchors.appendChild(span);
        }
        if (elements[i].nodeName === 'TEXTAREA' || elements[i].nodeName === 'INPUT' ) {
            b++;
            span.innerHTML = "textfields - " + b;           
            span.style.border = '1px solid orange';
            span.style.color = 'orange';
            text.appendChild(span);

        }
        if (elements[i].nodeName === 'BUTTON') {
            c++;
            span.innerHTML = "buttons - " + c;          
            span.style.border = '1px solid green';
            span.style.color = 'green';
            buttons.appendChild(span);

        }
        if (elements[i].onclick) {
            d++;
            span.innerHTML = "events - " + d;           
            span.style.border = '1px solid pink';
            span.style.color = 'pink';
            events.appendChild(span);

        }
    }
}
setNumbers();

这是代码。该函数必须附加相关 div 中的元素数量，但仅附加 textarea 元素。你能检查一下我的功能并告诉我哪里漏掉了什么吗？谢谢 这是fiddle

Answer 1

您在整个范围内使用相同的 span 变量，因此每次都会覆盖它。 HTML 中匹配 if 的最后一个元素是 textarea，因此它是最后计算的类型。

最短修复:删除 span 并使用它:

    if (elements[i].nodeName === 'A') {
        a++;
        anchors.innerHTML = "anchors - " + a;       
        anchors.style.border = '1px solid yellow';
        anchors.style.color = 'yellow';
    }

PS:更好的想法是创建一个计算指定类型元素的函数(例如setNumbers(type))，现在您重复自己多次并使用全局选择器* 选择所有项目，即使您只需要这些匹配的 a、textarea 等。