jQuery each().height() in native JS

My goal is to have the same height for all bootstrap card-headers, card-bodys and card-footers. I couldn’t find a way to do this without JS.
I found a jQuery Code (https://codepen.io/felinuxltda/pen/KKVVYYN?editors=1111)

var x = 0;
$(".card-deck .card-header, .card-deck .card-footer")
  .each(function (id, it) {
    if ($(it).height() > x) {
      x = $(it).height();
    }
  })
  .height(x);
});

I converted this code to native JS but I have to loop multiple times.

var header = 0;
var body = 0;
var footer = 0;
document.querySelectorAll(".card-header, .card-body, .card-footer").forEach(function (element){
    if (element.classList.contains('card-header')){
        if (element.offsetHeight > header) {
            header = element.offsetHeight;
        }
    } else if (element.classList.contains('card-body')){
        if (element.offsetHeight > body) {
            body = element.offsetHeight;
        }
    } else if (element.classList.contains('card-footer')){
        if (element.offsetHeight > footer) {
            footer = element.offsetHeight;
        }
    } 
});
document.querySelectorAll(".card-header").forEach(function (element){
    element.style.height = header;
});
document.querySelectorAll(".card-body").forEach(function (element){
    element.style.height = body;
});
document.querySelectorAll(".card-footer").forEach(function (element){
    element.style.height = footer;
});

I wonder if there is a similar way to do jQuery “each().height()” in native JS.