I have a tree structure as follows:

<ul id="theul275">
  <li>
    <div id="red"></div>
    <img id="green" />
    <script></script>
    <div id="blue"></div>
  </li>
</ul>

There are multiple UL's likes this on my page each with a different id. I am getting each UL by doing this:

var child = document.getElementById('theul' + id).getElementsByTagName('*');

the problem is, I only want to get the children of each ul which are either div's or img's. Is there a way to get elements by multiple tag names?

I really appreciate any help because I am kind of new to JavaScript! Thanks!

I have a tree structure as follows:

<ul id="theul275">
  <li>
    <div id="red"></div>
    <img id="green" />
    <script></script>
    <div id="blue"></div>
  </li>
</ul>

There are multiple UL's likes this on my page each with a different id. I am getting each UL by doing this:

var child = document.getElementById('theul' + id).getElementsByTagName('*');

the problem is, I only want to get the children of each ul which are either div's or img's. Is there a way to get elements by multiple tag names?

I really appreciate any help because I am kind of new to JavaScript! Thanks!

• javascript

• You should definitely be using element.childNodes instead of element.getElementsByTagName for this. – user1385191 Commented Feb 24, 2011 at 19:31
• 1 @Matt: childNodes only return direct decedents, not child of childs. But you can of course use it in a iterate function. – fredrik Commented Feb 24, 2011 at 19:34
• Perhaps this will help: stackoverflow./questions/914783/javascript-nodelist/… – zdyn Commented Feb 24, 2011 at 19:38
• From stackoverflow./a/2317716/820013 document.querySelectorAll("div, img"); – shao.lo Commented Nov 18, 2013 at 21:23

4 Answers 4

Depending on what browsers you may to support, you could use the CSS selector interface.

document.getElementById('theul275').querySelectorAll('div, img');

Or use a library. There are plenty of options out there. I am familiar with two,

MooTools

$('theul275').getElements('div, img');

jQuery

$('#theul275').find('div, img');

Or get a reference to the li node, and loop through each node and check if the nodeName is DIV or IMG.

for (var i = 0, l = child.length; i < l; i++)
{
    if (child[i].nodeName == 'DIV' || child[i].nodeName == 'IMG')
    {
          //...
    }
}

You could use a iterative method for this.

var elemArray = document.getElementById('theul' + id).childNodes,
    getChildByNodeName = function (elem, pattern) {
        var childCollection = [],
            re = new RegExp(pattern, 'g'),
            getChild = function (elements) {
                var childs = elements.childNodes,
                    i = 0;

                if (childs) {
                    getChild(childs);
                    for (i = 0; i < childs.length; i += 1) {
                        if (childs[i].nodeName.match(pattern)) {
                            childCollection.push(childs[i]);
                        }
                    }
                }
            };

         getChild(elem);
         return childCollection;
     } 

var childs2 = getChildByNodeName(elemArray, '^(DIV|IMG)$'); // array of match elements

And just change the pattern ('^(DIV|IMG)$') to suite your needs.

If you can use jQuery, try

var child = $("#theul" + id).find("div,img");

Otherwise, see JavaScript NodeList.