如何获取h2标签的值，其他div中的div使用javascript [英] how to get value of h2 tag for a div inside other div with id using javascript

问题描述

有些东西像：

pre> < div class =mainDivClassid =mainDiv>
< div class =subDivClass>
< h2> one< / h2>
你好一个！
< / div>

< div class =subDivClass>
< h2> two< / h2>
你好两个！
< / div>

< div class =subDivClass>
< h2> three< / h2>
你好三！
< / div>
< / div>


在我的javascript中，我循环遍历上面的div，如：

  var divLists = document.getElementById（'mainDiv'）。firstChild.childNodes; （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值上。
也就是说，如果h2是香蕉，banana.png将进入iconFile，但如果h2是橙色，则会选择orange.png。

如何在javascript中获取h2值？

感谢阅读!!

Nik

解决方案

不要使用innerHTML，这是一种不可靠的专有Microsoft方法;如果您习惯于使用它，您将立即开始出现问题，如果您在应用程序级开始编码，并且无法弄清楚为什么。坚持使用DOM规范。

一个例子，你可以明显地抛出一个循环...

  document.getElementById（'subDivClass'）。getElementsByTagName（'h2'）。firstChild.nodeValue 
  

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

.parentNode.parentNode。 parentNode - 您可以尽可能多地使用DOM或DOM。

.childNodes [0] - 子元素的索引，不包含对元素的引用（使用treewalker）。

.nodeValue - 文本一个节点的值，不要使用innerHTML。

.previousSibling - 参考元素之前的元素，而不是子/ p>

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

ÿ ou可以显示所有物体（例如，方法，属性和其他对象）对于使用in运算符的任何对象来发现还有什么可用的...

  for （我在document.getElementById（'mainDiv'））{alert（'i ='+ i）;} 
  

I have a div with id, which has some other div's without id.

Some thing like:

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

In my javascript, I am looping through above div like:

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

As shown, I am setting iconFile variable on value of i. So for i = 0, it would be details.png while for all others, it would be search1.png.

Now, I want to decide the iconFile variable value based on the h2 value of the element. That is, if h2 is banana, banana.png will go in iconFile but if h2 is orange, orange.png will be selected.

How to get h2 value inside javascript ?

Thanks for reading!!

Nik

解决方案

Don't use innerHTML, it's an unreliable proprietary Microsoft method; should you get used to using it you will immediately begin having problems if you start coding at an application level and not be able to figure out why. Stick to using DOM specifications instead.

An example that you can obviously throw in to a loop...

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

.parentNode - The parent element of the currently referenced element.

.parentNode.parentNode.parentNode - You can use this as much as you want to go up or around the DOM.

.childNodes[0] - Index of child elements, does NOT contain reference to text nodes AFTER an element (use treewalker for that).

.nodeValue - The text value of a node, do NOT use innerHTML.

.previousSibling - The element BEFORE the reference element, not a child/parent.

.nextSibling - The element AFTER the reference element, not a child/parent.

You can reveal all objects (e.g. methods, properties and other objects) for any object using the in operator to discover what else is available to you...

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

这篇关于如何获取h2标签的值，其他div中的div使用javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！