javascript - 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_or_a_tag所有form或标签存储在变量中。a

Answer 1

您可以使用querySelectorAll.

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

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而是 Array；但是每个项目都是一个Node。

Answer 3

我不认为这个功能支持这个功能。AFAIK 您只能使用 getElementsByTagName("*") 通配符来选择所有节点。您可以尝试使用 Sizzle 之类的库来使用 CSS 选择器。

Answer 4

如果节点序列很重要，这里是纯 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);