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值？

感谢您阅读!!

的Nik

Answer 1

不要使用innerHTML，这是一种不可靠的Microsoft专有方法;如果您习惯使用它，如果您在应用程序级别开始编码而无法弄清楚原因，您将立即开始遇到问题。坚持使用DOM规范。

一个你可以明显投入循环的例子......

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

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

.parentNode.parentNode.parentNode - 您可以根据自己的需要尽可能多地使用它。

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

.nodeValue - 节点的文本值，请勿使用innerHTML。

.textContent - 获取或设置元素的文本（但没有子元素）;比nodeValue稍微容易些，但它仍有合理的限制。

.previousSibling - 元素BEFORE参考元素，而不是子/父。

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

您可以使用in运算符显示任何对象的所有对象（例如方法，属性和其他对象），以发现您可以使用的其他对象...

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

应该注意的是，如果你坚持使用HTML解析器.nodeName将全部为大写（例如旧的Internet Explorer方式）而不是使用XML解析器（application / xhtml + xml）{{1将正确地将元素的名称返回为小写（除非你真的使用90年代的风格或其他东西）。

还应该注意的是，当您使用.nodeName和previousSibling单独的换行符会创建nextSibling时，这些换行符会混乱CSS（设置textNode通常会消除这种情况。）

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

    }

如何使用javascript获取id为另一个div内的div的h2标签值

4 个答案: