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

我的樹結構如下：JavaScript：如何使用getElementsByTagName獲取img和div元素

<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有點新意！謝謝！

來源

2011-02-24 Chad

你應該使用'element.childNodes'來代替'element.getElementsByTagName'。 – 2011-02-24 19:31:27

@Matt：childNodes只返回直接的死者，而不是孩子的孩子。但你當然可以在迭代函數中使用它。 – fredrik 2011-02-24 19:34:18

也許這將幫助：http://stackoverflow.com/questions/914783/javascript-nodelist/914995#914995 – zdyn 2011-02-24 19:38:31

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

來源

2011-02-24 19:32:37 duri

如果你可以使用jQuery，儘量

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

否則，請參閱JavaScript NodeList。

來源

2011-02-24 19:40:27 zdyn

根據您可能支持的瀏覽器，您可以使用CSS選擇器界面。

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

或使用庫。那裏有很多選擇。我所熟悉的兩個

MooTools的

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

jQuery的

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

還是打通各個節點的參考li節點，循環和檢查節點名稱爲DIV或IMG。

來源

2011-02-24 19:46:39 Anurag

這是最好的答案，imo。 – 2013-07-31 04:59:34

您可以對此使用迭代方法。

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)$'）適合您的需求。

來源

2011-02-24 20:02:13 fredrik

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

回答

相關問題