Get id of ancestor element from onclick with JavaScript

MY OWN ANSWER PROVIDED BELOW

How do I get an ancestor ID tied to a specific element type? (Special Request: The solution in JavaScript, not in jQuery if possible).

Right now I'm only beginning the code, and I'm at:

document.onclick = clickHandler;

function clickHandler(e){
    console.log(e.target);
}

I'd like to know where to go from here to get the specific information I'm looking for

I have a series of several ARTICLE tags on my page with unique IDs (box_1, box_2, etc...) . The desire is to click anywhere on any of these articles, and figure out which article has been clicked. This is because I want to manipulate the specific article's styling and properties based on what's been clicked.

My logic is this:

record click. If click is in box_n manipulate sizing/position of

<article id="box_*n*"></article>

Also, in case it helps, it is NOT entirely necessary for me to try and capture clicks at the document level, but I figured this information would be available no matter where I clicked.

MY ANSWER: Basically this will tell you all parent elements of whatever you click on, and for me, I stop it on my articles and grab their ID's. Thank you all for your input!

function clickHandler(e){
  var boxName = e.target;
  isArticle(boxName);
}

function isArticle(boxName){
  if (boxName.tagName === "ARTICLE"){
    console.log(boxName.id);
  } else if(boxName.parentNode){
    boxName = boxName.parentNode;
    isArticle(boxName);
    console.log(boxName);
  }
}

document.onclick = clickHandler;

Solution

You can put a single listener on the body element, then use the related Event object to find any ancestor article elements, e.g.

<body onclick="getArticle(event)" ...>

Then the function:

function getArticle(event) {
  var target = event.target || event.srcElement;
  var article;

  if (target) {
    article = upTo(target, 'article');
  }

  if (article) {
    // do stuff with article
  }
}

// Find first ancestor of el with tagName
// or null if not found
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}