選定元素的樹

Question

我想訪問所選元素的選擇器。

<div id="parent"> 
<div class="foo"> 
    <div id="bar" onclick="bla()"> 
    change red 
    </div> 
</div> 
</div> 

<div id="parent2"> 
<div class="foo"> 
    <div id="bar" onclick="bla()"> 
    change blue 
    </div> 
</div> 
</div> 

元素我選擇

#parent .foo #bar 

我希望能夠直接訪問它，因爲它可以超過一個。

function bla(){ 

return el.getElementsByTagName('*'); 

} 

我想要的結果看

1. #bar => #parent包含.foo #bar

2. #bar =>＃parent2包含.foo #bar

謝謝你

Answer 1

你不應該使用相同的ID爲一個以上的元素，

反正您選擇的答案有以下幾點：

<div id="parent"> 
    <div class="foo"> 
     <div id="bar" onclick="bla(this)"> 
      change red 
     </div> 
    </div> 
</div> 

<div id="parent2"> 
    <div class="foo"> 
     <div id="bar" onclick="bla(this)"> 
      change blue 
     </div> 
    </div> 
</div> 

<script type='text/javascript'> 
    function bla(e) { 

     // ID of clicked item 
     var elementId = e.id; 
     var divBarParent = e.parentElement 
     var divFooParent = divBarParent.parentElement 

     // You can access this elements directly 
     // by calling divBarParent & divFooParent 

     var divId = divFooParent.id; 
     console.log("#bar=> #" + divId + ".foo #" + elementId); 
    } 
</script>