Document iteration: what problems should I account for? (function( d, w ){

    function showClimb( e ){
        var t = e.target;
        console.log( t.id );
        while( t.id !== 'document-body' ){
            t = t.parentNode;
            console.log( t.id );
        }
    }

    d.body.addEventListener( 'click', showClimb, false );

}( document, window ))


I just wrote this snippet to test if an element or it's child has been selected. What risks does this approach have? What failsaves should I include to make sure this loop doesn't get stuck somehow? I am writing for IE9 and higher.
Well, overall, I'd worry first about your variable names :D d, w and t especially. A dev coming in seeing this would say "what sorcery is this?".

Now t.id isn't a guarantee. Not all elements may have an id attribute. You might encounter blanks while climbing up. Try filling it in with element.tagName.

Next would be your hard-coded document-body. Seems like document-body is something specific to your code. Losing it would mean an infinite climb. Why not compare against document for a more guaranteed way to hit the top?

Here's my take on it. Not optimal, but does the same thing.



function climb(element) {
  var elementName = element.id || element.tagName;
  return element === document ? [elementName] : climb(element.parentNode).concat(elementName);
}

document.body.addEventListener('click', function(e) {
  console.log(climb(e.target).join(' &lt;- '));
}, false);
&lt;a href="#" id="test"&gt;test&lt;/a&gt;