Html Analysis

allVisibleElements.js

function allVisibleElements(root=document.body){
  const iter = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, {
    acceptNode(e){
      if(e.offsetWidth && e.offsetHeight && e.getClientRects().length)
        return NodeFilter.FILTER_ACCEPT
    }
  })
  const nodes = []
  let node;
  while(node = iter.nextNode())
    nodes.push(node)
  return nodes
}
var allVisibleElementProps = allVisibleElements().map(elm => {
  var rect = elm.getBoundingClientRect(elm)
  var props = {
    type: elm.nodeName.toLowerCase(),
    top: rect.top,
    bottom: rect.bottom,
    left: rect.left,
    right: rect.right,
  }
  for(const attr of elm.attributes){
    switch(attr.name){
      case 'id':
        props.id = elm.id
        break
      case 'class':
        for(const name of elm.classList)
          props['.'+name] = true
        break
      case 'style':
        for(const style of elm.style)
          props['style.'+style] = elm.style[style]
        break
      default:
        props['@'+attr.name] = attr.value;
    }
  }
  return props
})
console.log(JSON.stringify(allVisibleElementProps))

notebook.ipynb