I have a for loop inside which I check to see if the current element being iterated has any a tags or form tags inside of it and if so I do some stuff to them. Anyway I can check either or like so:

var form_or_a_tag = elem[i].getElementsByTagName('a');
var form_or_a_tag = elem[i].getElementsByTagName('form');

But how can I bine them?

these all fail:

var form_or_a_tag = elem[i].getElementsByTagName('a form');
var form_or_a_tag = elem[i].getElementsByTagName('a, form');
var form_or_a_tag = elem[i].getElementsByTagName('a') || elem[i].getElementsByTagName('form');

Basically I would like to store in the variable form_or_a_tag all form or a tags that reside in the element currently being iterated.

I have a for loop inside which I check to see if the current element being iterated has any a tags or form tags inside of it and if so I do some stuff to them. Anyway I can check either or like so:

var form_or_a_tag = elem[i].getElementsByTagName('a');
var form_or_a_tag = elem[i].getElementsByTagName('form');

But how can I bine them?

these all fail:

var form_or_a_tag = elem[i].getElementsByTagName('a form');
var form_or_a_tag = elem[i].getElementsByTagName('a, form');
var form_or_a_tag = elem[i].getElementsByTagName('a') || elem[i].getElementsByTagName('form');

Basically I would like to store in the variable form_or_a_tag all form or a tags that reside in the element currently being iterated.

• javascript

• What browsers do you need to support? – PeeHaa Commented Jan 15, 2013 at 22:17
• You could just concat the two arrays: a_tags.concat(form_tags) – lethal-guitar Commented Jan 15, 2013 at 22:19
• @lethal-guitar: getElementsByTagName returns a NodeList not an array, so it doesn't have concat. – gen_Eric Commented Jan 15, 2013 at 22:21
• @Rocket Hazmat is there anyway to merge nodelists? EDIT: looks like there is stackoverflow./questions/914783/javascript-nodelist. This worked for me. – user967451 Commented Jan 15, 2013 at 22:25
• @JakeRow123: You can try querySelectorAll (like in my answer). – gen_Eric Commented Jan 15, 2013 at 22:30

4 Answers 4

This might work:

var nodelist_a    = elem[i].getElementsByTagName('a');         // NodeList
var nodelist_form = elem[i].getElementsByTagName('form');      // NodeList

var array_a       = Array.prototype.slice.call(nodelist_a);    // Array
var array_form    = Array.prototype.slice.call(nodelist_form); // Array

var array_both    = array_a.concat(array_form);                // Array

Note that the result is no longer a NodeList but an Array; however each item is a Node.

You can use querySelectorAll.

var form_or_a_tag = elem[i].querySelectorAll('a, form');

I do not think that this function supports this feature. AFAIK you can use only getElementsByTagName("*") wildcard to select all nodes. You can try some library like Sizzle to use CSS selectors.

If sequence of nodes is important, here is pure Javascript solution:

var getNodesInTreeByNodeName = function (node, /*Array of Strings*/ allowed_node_names)
{
    var childCollection = [];
    var getTreeNodes = function (tree_root)
    {
        if (allowed_node_names.indexOf(tree_root.nodeName) > -1)
            childCollection.push(tree_root);
        var childs = tree_root.childNodes;
        if (childs)
            for (var i=0, childs_length=childs.length ; i<childs_length ; i++)
                getTreeNodes(childs[i]);
    };
    getTreeNodes(node);
    return childCollection;
};

Example of use:

    var node_types = ["A","FORM"];
    var nodes = getNodesInTreeByNodeName(window.document, wanted_nodes);