Как получить потомков в JavaScript

Question

все я хочу получить все р элементы с классом «a1» под DIV с классом «oshow», который agian под классом «pro_line» без использования getelementsbyclassname в Javascipt

<div id="Zi03"> 
    <div class="ye">text</div> 
    <div class="yee">text</div> 
    <div class="pro-line"> 
     <div class="oshow"> 
     <div class="compic"><a href="#"></a></div> 
     <p class="a1"><a href="poduct"></a></p> 
     <p class="a2"><a href="poduct"></a></p> 
     <div class="a3"><a href="poduct"></a></div> 
     </div> 
     <div class="oshow"> 
     <div class="compic"><a href="#"></a></div> 
     <p class="a1"><a href="poduct"></a></p> 
     <p class="a2"><a href="poduct"></a></p> 
     <div class="a3"><a href="poduct"></a></div> 
     </div> 
     <div class="oshow"> 
     <div class="compic"><a href="#"></a></div> 
     <p class="a1"><a href="poduct"></a></p> 
     <p class="a2"><a href="poduct"></a></p> 
     <div class="a3"><a href="poduct"></a></div> 
     </div> ... 
     .... 
     .... 
    </div> 
</div> 

Пожалуйста, кто-нибудь помочь мне, как получить его в JavaScript без использования getelementsbyclassname, но я могу использовать его ID

Большое спасибо заранее ....

Answer 1

var elem = document.getElementById('Zi03'); 
var proline = elem.children[2]; 

For loop for all immediate childs of proline 
    var oshow= proline.firstElementChild; 
    var a1 = show.children[1] 
    //display a1 Or whatever you want 
End 

Это работает, если a1 и другие элементы находятся на одном уровне иерархии

Answer 2

Вы можете использовать следующую замену getElementsByClassName() современных браузеров:

function getElementsByClassName(node, classname) { 
     /// <summary> 
     /// Replaces built-in function of modern browser. Implemented because not supported by IE7/8 
     /// </summary> 
     /// <param name="node">DOM element withing which search is done</param> 
     /// <param name="classname">String with class name for search</param> 
     /// <returns type="">Array of found elements</returns> 

     var a = []; 
     var re = new RegExp('(^|)' + classname + '(|$)'); 
     var els = node.getElementsByTagName("*"); 
     for (var i = 0, j = els.length; i < j; i++) 
      if (re.test(els[i].className)) a.push(els[i]); 
     return a; 
    } 

Называйте это что-то вроде:

var aElems = getElementsByClassName(document.getElementById('Zi03'),'pro-line') 

Answer 3

Вот версия, чтобы вы начали, это не идеально, но вы можете ее улучшить.

var nodes = []; 
var allChildNodes = document.getElementById('Zi03').getElementsByTagName('*'); 
for (var i = 0; i < allChildNodes.length); i++) { 
    var isA1 = ; 
    var isUnderProline = allChildNodes[i].parentNode.className == 'pro-line'; 
    var isUnderOShow = allChildNodes[i].parentNode.parentNode.className == 'oshow'; 

    if (
      allChildNodes[i].className == 'a1' && 
      allChildNodes[i].parentNode.className == 'pro-line' && 
      allChildNodes[i].parentNode.parentNode.className == 'oshow' 

     ){ 
     nodes.push(allChildNodes[i]); 
    } 
}