JS-原生-遍历子标签的所有父标签

用多了框架，有时候会忘记原生的咋写，最近本人在写一个选项卡，类似小米闪购网站的那种

image.png

选项卡的代码结构如下

<ul id="buy_nav_ul">
    <li id="1" class="avtive"><em>18:00</em><span> <em>即将开始<br>01：25：15</em></span></li>
    <li id="2"><em>20:00</em> 即将开始</li>
    <li id="3"><em>22:00</em> 即将开始</li>
    <li id="4"><em>18:00</em> 即将开始</li>
    <li id="5"><em>18:00</em> 即将开始</li>
</ul>

我的需求是点击指定选项卡获取li标签的id值，但是当我点击文字所在的标签时(类似上面代码的em或者span标签)，获取到的id是null，
因为点击获取到的em或者span标签是没有id值的，所以需要获取父标签，像第一个li的倒计时标签，父标签并不是li，所以需要遍历父标签。

var buy_ul = document.getElementById("buy_nav_ul");
buy_ul.addEventListener("click",clickBuyLi);
function clickBuyLi(event) {
    var id = event.target.getAttribute("id");
    if (id == null) {
        var parentE = event.target;
        do {
            parentE = parentE.parentNode;
        }
        while (parentE.getAttribute("id") == null);
        id = parentE.getAttribute("id");
    }
    console.log(id);

}

虽然用jQuery可以快速搞定，但是我还是用原生写，因为我是小白。写的不好的轻点喷，有什么不好的地方请指出，谢谢