Как получить все элементы координаты

Question

Если я знаю, что идентификатор элемента „сноска“, я могу использовать

document.getElementById("footer").getBoundingClientRect(); 

, чтобы получить элемент „сноска“ координаты.

Существует весь код

var page = require('webpage').create(); 

page.open("https://stackoverflow.com/questions/18657615/how-to-render-an-html-element-using-phantomjs", function (status) { 
    if (status !== 'success') { 
     console.log('Unable to load the address!'); 
    } else { 
     window.setTimeout(function() { 
      //Heres the actual difference from your code... 
      var bb = page.evaluate(function() { 
       //return document.body.getBoundingClientRect(); 
       return document.getElementById("footer").getBoundingClientRect();  
      }); 

      page.clipRect = { 
       top: bb.top, 
       left: bb.left, 
       width: bb.width, 
       height: bb.height 
      }; 
      console.log(bb.top); 
      console.log(bb.left); 
      console.log(bb.width); 
      console.log(bb.height); 

      page.render('capture.png'); 
      phantom.exit(); 
     }, 200); 
    } 
}); 

результатом является

4004,6875
632,5

Я должен знать page есть элемент, идентификатор "сноска" , Если есть неизвестная веб-страница, я не знаю никакой информации на веб-странице. Как я могу получить все координаты элемента.

Возможно, traversing the dom может помочь, но я всегда получаю ошибки. Я не знаю, как правильно слить код.

Answer 1

Давайте посмотрим, как мы можем изменить код, указанный в link вы нашли:

function theDOMElementWalker(node) { 
    if (node.nodeType == 1) { 

     //console.log(node.tagName); 

     node = node.firstChild; 

     while (node) { 
      theDOMElementWalker(node); 
      node = node.nextSibling; 
     } 
    } 
} 

Это может быть легко расширена «копировать» в DOM для пользовательского представления. Например:

var dom = page.evaluate(function(){ 
    var root = { children: [] }; 
    function walk(node, obj) { 
     if (node.nodeType == 1) { 

      obj.tagName = node.tagName; 
      obj.boundingClientRect = node.getBoundingClientRect(); 

      node = node.firstChild; 

      var childObj; 
      while (node) { 
       childObj = { children: [] }; 
       obj.children.push(childObj); 
       walk(node, childObj); 
       node = node.nextSibling; 
      } 
     } 
    } 

    walk(document.documentElement, root); 

    return root; 
}); 

console.log(JSON.stringify(dom, undefined, 4)); 

Идея здесь состоит в том, чтобы передать узел DOM и его «простое» представление в функцию ходьбы.