How to get descendents in javascript

Question

everyone i want get all the p elements with class "a1" under div with class "oshow" which is agian under class "pro_line" without using getelementsbyclassname in 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>

Please somebody help me how to get it in javascript without using getelementsbyclassname but i can use it by ID

Thanks alot in advance....

If you're using some browser that doesn't support `getElementsByClassName()` (e.g. IE7) there're custom implementations of that function — Yuriy Galanter, Jun 07 '13 at 18:21
Maybe this will help? http://stackoverflow.com/a/7410966/2454376 — mishik, Jun 07 '13 at 18:22
i dnt know much about the function @YuriyGalanter.help me to get rid of this. — Chethu, Jun 07 '13 at 18:23

score 1 · Answer 1 · answered Jun 07 '13 at 18:24

1

You can use following replacement for getElementsByClassName() of modern browsers:

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;
    }

Call it with something like:

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

answered Jun 07 '13 at 18:24

Yuriy Galanter

38,833
15
69
136

This doesn't make sure the you only get `.a1` under `oshow` under `pro-line` You need to call getElementsByClassName multiple times to make sure the hierarchy restrictions are followed – Ruan Mendes Jun 07 '13 at 18:29
That's implicit. Of course call will have to be repeated as needed. – Yuriy Galanter Jun 07 '13 at 18:33
I disagree that it's implicit, it's easy to be tempted and just write `getElementsByClassName(document.getElementById('Zi03'),'a1')`. It looks like half a solution.I think it's still misleading since it doesn't really answer the question fully – Ruan Mendes Jun 07 '13 at 19:56

Ani · Accepted Answer · 2013-06-07T18:24:12.647

0

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

This works if a1 and other elements are at same hierarchy level

edited Jun 07 '13 at 18:24

answered Jun 07 '13 at 18:17

Ani

4,473
4
26
31

score 0 · Answer 3 · answered Jun 07 '13 at 18:31

Here's a version to get you started, it's not perfect but you can improve it

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]);
    }
}

How to get descendents in javascript

3 Answers3