javascript - 通过添加父名称来创建元素的对象链

Question

我想创建包含父元素的链，并通过使用相应的符号(.和#)返回顶级父元素(类或id)的任何属性。我已经尝试过，但跑到无限循环

html 结构:-

<div id="main">
   <p>Hello Alisha..</p>
   <div class="container">
     <div id="toplayer">

     </div>
     <div class="mid_layer">
         <ul>
            <li>javascript</li>
            <li id="target">qbasic</li>
         </ul>
     </div>
  </div>
</div>

我的js代码:-

var t = document.getElementById("target");

 function  chain(el) {
    var f = {};
    var m = el;
    if (el !== null && el !== undefined) {
      var y = m.parentElement;
      while(null !== y){
        var r = {};
        r['parent'] = y;
        f[m.tagName] = r;
        var m = y;
      }
      return f;
     }
   }
  chain(t);

上面的程序中循环没有停止。

请不要建议我使用 jquery 的想法

Answer 1

将y的赋值移动到循环内部(正如DrC评论的那样)，因为现在y总是not null，因此无限循环。

var t = document.getElementById("target");

 function  chain(el) {
    var f = {};
    var m = el;
    if (el !== null && el !== undefined) {
      var y = m.parentElement;
      while(null !== y){
      y = m.parentElement;
        var r = {};
        r['parent'] = y;
        f[m.tagName] = r;
        var m = y;
      }
      return f;
     }
   }
  chain(t);