如何使用javascript获取具有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，orange.png将被选择。

如何在javascript中获取h2值？

感谢您的阅读！

尼克

Answer 1

不要使用innerHTML，它是一种不可靠的微软专有方法；如果您习惯使用它，如果您在应用程序级别开始编码并且无法找出原因，您将立即开始遇到问题。坚持使用 DOM 规范。

显然可以将其放入循环中的示例...

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

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

.parentNode.parentNode.parentNode - 您可以根据需要在 DOM 上或周围使用它。

.childNodes[0] - 子元素的索引，不包含对元素之后的文本节点的引用（为此使用 Treewalker）。

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

    }