n親等までqueryを表示する。

複雑なdomだとqueryがわからない時がある。

自身を含めてdomを遡りqueryを取得する。

let fn={};
fn.sq=(d,opt=2)=>{
 let f=(d)=>{return (d)?[
   d.tagName.toLowerCase()
   ,(d.classList.length!=0)?'.'+[].slice.call(d.classList).join('.'):''
   ,(d.id&&d.id!='')?('#'+d.id):''
   ,(d.name)?`[name="${d.name}"]`:''
  ].join(''):null;
 }
 ,now=d
 ;return Array.from({length:opt})
  .map((d,i)=>{now= (now)?(i===0)?now:now.parentElement:null;return now})
  .map(d=>f(d)).filter(d=>d).reverse().join('>')
 ;
}
;
//fn.sq(element,3); //parent from me to 3. //div.temp>div.f>div.ed.of-editer

querySelectorでそのまま使える。

document.querySelector('div.temp>div.f>div.ed.of-editer')
//<div class="ed of-editer" contenteditable="plaintext-only">ee</div>

全部

let fn={};
fn.sq=(d,opt=2)=>{
 let f=(d)=>{return (d)?[
   d.tagName.toLowerCase()
   ,(d.classList.length!=0)?'.'+[].slice.call(d.classList).join('.'):''
   ,(d.id&&d.id!='')?('#'+d.id):''
   ,(d.name)?`[name="${d.name}"]`:''
  ].join(''):null;
 }
 ,now=d
 ;return Array.from({length:opt})
  .map((d,i)=>{now= (now)?(i===0)?now:now.parentElement:null;return now})
  .map(d=>f(d)).filter(d=>d).reverse().join('>')
 ;
}
;
let el=document.createElement('input')
,caller=function(ev){ if(ev.target!=el)el.value=fn.sq(ev.target,3)}
el.style.cssText='position:fixed;top:0;right:2rem;width:22rem;'
document.body.appendChild(el);
document.body.addEventListener('click',caller,false);
;

<!------test dom------>
<section id="app">
<div class="left of-side">
<div class="has-top">top</div>
<div class="has-bottom">bottom</div> 
</div>
<div class="center"></div>
<div class="right of-side">
<div class="has-top">top</div>
<div class="has-bottom">bottom</div> 
</div>
<!------------------>
<div class="temp">
 <div class="f"><div class="ed of-editer" contenteditable="plaintext-only">ee</div><div class="info">a</div></div> 
</div> 
</section>

注意

全く同一構成の要素はわからない。例えば、liの何番目か等。
あくまで、どのフレームに対して処理を行えばいいか知るのが目的。