title: Sort an array with DOM tags and attributes by left and top values
body: <p>I have got an array with DOM tags (div -> children img -> div closed). Those tags has attributes (left and top values). I added em as nodeLists so i can access elements offsetLeft and offsetTop to determine those values but i cant figurate out how to rearange those tags in the array ascending by left or top values.</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;body&gt;
      &lt;div style="left:40px;top:10px;position:absolute"&gt;
          &lt;img src="assets/images/text1.png" /&gt;
      &lt;/div&gt;
      &lt;div style="left:200px;top:88px;position:absolute"&gt;
          &lt;img src="assets/images/text2.png" /&gt;
      &lt;/div&gt;
      &lt;div style="left:85px;top:166px;position:absolute"&gt;
          &lt;img src="assets/images/text3.png" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var unsortedElements = [];
          var sortedElements = [];
  
          var elements = document.querySelectorAll("body &gt; div");
          for (var i = 0; i &lt; elements.length; i++) {
              var element = elements[i];
              if (element != null) {
                  unsortedElements.push(element);
  
                  var x = element.offsetLeft;
                  var y = element.offsetTop;
                  customSort(unsortedElements[i]);
              }
          }
  
  function customSort(element){
  var left = element.offsetLeft;
  
  sortedElements.push(left);
  console.log(sortedElements); -&gt; will return the left values (40,85,200) BUT i need this array sorted with div tags (like [&lt;div style="left: 40px;"&gt;img child&lt;/div&gt;, &lt;div style="left: 85px;"&gt;img child&lt;/div&gt;, &lt;div style="left: 200px;"&gt;img child&lt;/div&gt;])
  
  }
  </code></pre>
  
  <p><strong>Note</strong></p>
  
  <p>Pure Javascript please!</p>
  
  <p>Thank you :)</p>