getElementsByTagName：如何选择多个类型的标签？

Question

我有一个for循环，在其中我检查正在迭代的当前元素是否有任何a标签或form标签，如果有，则对其进行一些操作。 无论哪种情况，我都可以像这样检查：

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

但是我该如何将它们组合起来呢？

以下所有尝试都失败了：

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');

基本上，我想将当前迭代的元素中所有的form或a标签存储在变量form_or_a_tag中。

- user967451

---

你需要支持哪些浏览器？ - PeeHaa

你可以简单地将这两个数组连接起来：a_tags.concat(form_tags)。 - lethal-guitar

@lethal-guitar：getElementsByTagName 返回的是 NodeList 而不是数组，因此它没有 concat。 - gen_Eric

@Rocket Hazmat 是否有一种方法可以合并nodelist？ 编辑：看起来有https://dev59.com/pXNA5IYBdhLWcg3wjOre。这对我有用。 - user967451

@JakeRow123：你可以尝试使用 querySelectorAll（就像我的回答中所示）。 - gen_Eric

@Rocket Hazmat 喔，好的，知道了。我很少使用纯JS.. - lethal-guitar

Answer 1

你可以使用 querySelectorAll。

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

- gen_Eric

---

请注意，并非所有浏览器都支持此功能。我会让你想一想我指的是哪个浏览器。 - PeeHaa

任何值得使用的浏览器都支持此功能：http://caniuse.com/#search=querySelectorAll - gen_Eric

@PeeHaa：a, form不是CSS2选择器吗？ - gen_Eric

Answer 2

这可能会起作用：

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

注意，结果不再是NodeList，而是一个数组；但是每个项都是Node。

- Salman A

Answer 3

如果节点的顺序很重要，这里有一个纯JavaScript的解决方案：

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

使用示例：

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

- Greck

Answer 4

我不认为这个函数支持这个特性。据我所知，你只能使用getElementsByTagName（“*”）通配符来选择所有节点。您可以尝试使用类似Sizzle的库来使用CSS选择器。

- jlx84