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等。

Answer 2

试试这个： - http://jsfiddle.net/acguvd4f/8/

<强> JS： -

function setNumbers(){
    var a = 0;
    var b = 0;
    var c = 0;
    var d = 0;

    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++){      
    var span = document.createElement('span');
    span.style.background = 'black';
        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();