Javascript 递归函数求相对面积

下面的递归函数在所有具有标记名的HTML元素上运行，从body元素开始，一直到leaf。对于每个元素，代码获取背景颜色和元素区域（如果存在）：

  function findAllElements(element){
     if(element.tagName){    
       // getting the element background color and puts it in var "BGcolor"
       // getting the element area and puts it in var "AREA"
       // console.log both BGcolor and AREA with element.nodeName
        var children =element.childNodes;
        for (var i= 0;i<children.length;i++){
        findAllElements(children[i]);   
        }
    }
    // do something
   }

问题是：

我需要计算每个元素的相对面积。例如，如果我在DIV中有DIV，则内部DIV将是他的面积，而外部DIV将是他的面积减去内部DIV面积：

在上图中，输出应为：内部DIV区域为100px，外部DIV为400-100=300px

这也可以在其他元素中找到，例如：p标记内的强标记、DIV内的表等

我需要的是： 我需要向这个特定的递归函数添加一些代码行，这些代码行将为我提供如上所示的相对面积。一种解决方案可以是将所有子区域相加，并将其从父节点减少

我没有成功添加一些有用的东西…：

重要提示：

1我运行了大量不同的元素，因此这应该适用于所有类型，而不仅仅适用于这个DIV的示例

2我并不是在寻找如何获取颜色或如何计算面积的定义，我已经有了它，为了简化问题，我没有提到它。我要找的是在哪里以及如何添加这个子区域

---

非常感谢

您提到的解决方案应该可以计算所有子节点的面积之和，并减少父节点的面积。我看到的主要问题是获取DOM对象的大小，这一点可以通过以下解决方法解决：