Question

我的树结构如下：

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

在我的页面上有多个UL喜欢这个，每个都有不同的ID。我通过这样做获得每个UL：

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

问题是，我只想让每个ul的孩子成为div或img的孩子。有没有办法通过多个标签名称获取元素？

我非常感谢任何帮助，因为我对JavaScript有点新意！谢谢！

Answer 1

根据您可能支持的浏览器，您可以使用CSS选择器界面。

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

或使用图书馆。那里有很多选择。我熟悉两个，

MooTools的

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

的jQuery

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

或者获取对li节点的引用，并遍历每个节点并检查nodeName是DIV还是IMG。

Answer 2

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

Answer 3

您可以使用迭代方法。

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

只需更改模式（'^(DIV|IMG)$'）即可满足您的需求。

Answer 4

如果你可以使用jQuery，试试

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

否则，请参阅JavaScript NodeList。

JavaScript：如何使用getElementsByTagName获取img和div元素

4 个答案: