如何使用javascript獲取id為id的其他div內的div的h2標簽值

Question

我有一個帶有id的div，其中有一些沒有id的div。

就像是：

<div class="mainDivClass" id="mainDiv">
    <div class="subDivClass">
        <h2>one</h2>
              Hello One!!
    </div>

    <div class="subDivClass">
        <h2>two</h2>
              Hello Two!!
    </div>

    <div class="subDivClass">
         <h2>three</h2>
              Hello Three!!
    </div>
</div>

在我的javascript中，我循環遍歷上面的div，如：

var divLists = document.getElementById('mainDiv').firstChild.childNodes; 

for (var i = 0; i < tabLists.length; i++) { 
  var anchor = divLists[i].firstChild; 
  var iconFile;

  if(i==0)
  {
    iconFile = 'details.png';                     
  }

  else
  {
    iconFile = 'search1.png';
   }
  anchor.style.backgroundImage = 'url(' + iconFile + ')'; 
  anchor.style.backgroundRepeat = 'no-repeat';        
  anchor.style.backgroundPosition = '1px 2px';        
  anchor.className = 'toplevel-tab';
} 

如圖所示，我在i的值上設置了iconFile變量。 所以對於i = 0，它將是details.png，而對於所有其他的，它將是search1.png。

現在，我想根據元素的h2值來決定iconFile變量值。 也就是說，如果h2是banana，banana.png將進入iconFile，但如果h2是橙色，則會選擇orange.png。

如何在javascript中獲取h2值？

謝謝閱讀！！

聶

Answer 1

不要使用innerHTML，它是一種不可靠的Microsoft專有方法; 如果您習慣使用它，如果您在應用程序級別開始編碼而無法弄清楚原因，您將立即開始遇到問題。 堅持使用DOM規范。

一個你可以明顯投入循環的例子......

document.getElementById('subDivClass').getElementsByTagName('h2').firstChild.nodeValue

.parentNode - 當前引用元素的父元素。

.parentNode.parentNode.parentNode - 您可以使用它來盡可能多地使用DOM。

.childNodes [0] - 子元素的索引，不包含對元素之后的文本節點的引用（使用樹行者）。

.nodeValue - 節點的文本值，不要使用innerHTML。

.textContent - 獲取或設置元素的文本（但沒有子元素）; 雖然它仍然有合理的限制，但比nodeValue容易一些。

.previousSibling - 引用元素之前的元素，而不是子元素/父元素。

.nextSibling - 引用元素之后的元素，而不是子元素/父元素。

您可以使用in運算符顯示任何對象的所有對象（例如方法，屬性和其他對象），以發現您可以使用的其他對象...

 for (i in document.getElementById('mainDiv')) {alert('i = '+i);}

應該注意的是，如果你使用HTML解析器.nodeName將全部為大寫（例如舊的Internet Explorer方式）而不是使用XML解析器（application / xhtml + xml） .nodeName將正確地返回元素的名稱為小寫（除非你真的喜歡90年代的風格）。

還應該注意的是，當你使用previousSibling和nextSibling ，單獨換行會創建一個textNode ，那些換行符會混亂CSS（將font-size設置為5px通常會消除這種情況）。

Answer 2

如果你想要mainDivClass中的所有H2元素，你可以使用getElementsByTagName方法：

var outerDiv = document.getElementById("mainDiv");
var h2s = outerDiv.getElementsByTagName("h2");

這將所有H2元素作為元素數組返回。

Answer 3

var answer = function () {
    var parent = document.getElementById("mainDiv"),
        h2 = parent.getElementsByTagName("h2"),
        a = h2.length,
        b;
    for (b = 0; b < a; b += 1) {
        switch (h2[b].innerHTML) {
        case "one":
            //do something
            break;
        case "two":
            //do something
            break;
        default:
            //do something else
            break; 
        }
    }
};

Answer 4

h2值將使用如下：

 for (var i = 0; i < tabLists.length; i++) { 
      var anchor = tabLists[i].firstChild; 
      var iconFile;


      if(tabLists[i].firstChild.innerHTML == "Tab 0")
      {
        iconFile = 'one.png';                     
      }

      else if(tabLists[i].firstChild.innerHTML == "apple")
      {
        iconFile = 'apple.png';
       }

      else if(tabLists[i].firstChild.innerHTML == "orange")
             {
                iconFile = 'banana.png';
       }

      else if(tabLists[i].firstChild.innerHTML == "banana")
             {
                iconFile = 'orange.png';
       }

      anchor.style.backgroundImage = 'url(' + iconFile + ')'; 
      anchor.style.backgroundRepeat = 'no-repeat';        
      anchor.style.backgroundPosition = '1px 2px';        
      anchor.className = 'toplevel-tab';

    }