javascript count visible elements

Question

I have been searching the forums but unable find any specific help in relation to my problem. I am trying to design an application using javascript which will count div elements which are either hidden or visible.

I am using

document.getElementById("div-element").childElementCount;

and could use something like:

document.querySelectorAll('#div-element .dic-class').length;

both of which work as intended by returning the total elements.

I am changing the visibility of specific div elements by:

document.getElementById('div-element').style.display == "block or none";

Answer 1

For something like this Array.prototype.filter comes to mind (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), but you can't use that on a nodelist, which is what you get when using querySelectorAll, so I would solve this by converting the nodelist to an array, then use filter on that.

To convert a nodelist to an array:

var array = [].slice.call(someNodeList);

(https://davidwalsh.name/nodelist-array)

So, we can do this:

//gives node list
divs = document.querySelectorAll('#div-element > div');
//convert to an array
var divsArray = [].slice.call(divs);
//so now we can use filter
//find all divs with display none
var displayNone = divsArray.filter(function(el) {
    return getComputedStyle(el).display === "none"
});
//and all divs that are not display none
var displayShow = divsArray.filter(function(el) {
    return getComputedStyle(el).display !== "none"
});
//and use length to count
var numberOfHiddenDivs = displayNone.length;
var numberOfVisibleDivs = displayShow.length;

Just a note: its important to use getComputedStyle (https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) rather than element.style because element.style will not reflect properties applied by css, it will only reflect inline styles.

Second note, this only counts "display:none;" as hidden, if you also want to include visibility:hidden; or some other criteria, use

var displayNone = divsArray.filter(function(el) {
    return getComputedStyle(el).display === "none" ||
        getComputedStyle(el).visibility === "hidden"
});
//and all divs that are not display none
var displayShow = divsArray.filter(function(el) {
    return !(getComputedStyle(el).display === "none" ||
        getComputedStyle(el).visibility === "hidden")
});

Demo:

//gives node list
divs = document.querySelectorAll('#div-element > div');
//convert to an array
var divsArray = [].slice.call(divs);
//so now we can use filter
//find all divs with display none
var displayNone = divsArray.filter(function(el) {
    return getComputedStyle(el).display === "none"
});
//and all divs that are not display none
var displayShow = divsArray.filter(function(el) {
    return getComputedStyle(el).display !== "none"
});
//and use length to count
var numberOfHiddenDivs = displayNone.length;
var numberOfVisibleDivs = displayShow.length;
alert("hidden:"+numberOfHiddenDivs+", visible:"+numberOfVisibleDivs);

#div-element > div{
    width:100px;
    height:50px;
    border:1px solid gold;
    background-color:red;
}
div.hide{
    display:none;
}

<div id='div-element'>
    <div class=hide></div>
    <div class=hide></div>
    <div class=hide></div>
    <div></div>
    <div></div>
    <div></div>
    <div class=hide></div>
    <div></div>
    <div class=hide></div>
    <div></div>
    <div style=display:none;></div>
    <div style=display:none;></div>
</div>