dom - how to get value of h2 tag for a div inside other div with id using javascript - Stack Overflow

admin管理员组

文章数量:1390641

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

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

• javascript
• dom
• html

Share Improve this question Follow edited Nov 25, 2011 at 11:02 Vicky asked Nov 25, 2011 at 9:53 VickyVicky 17.4k5555 gold badges152152 silver badges244244 bronze badges 1

• Are you aware that document.getElementById('mainDiv').firstChild; is likely a text node? document.getElementById('mainDiv').childNodes; would work better. – user1385191 Commented Nov 25, 2011 at 17:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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.

.textContent - Gets or sets the text of an element (but no child elements); a bit easier than nodeValue though it still has reasonable limitations.

.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);}

It should be noted that if you're stuck using the HTML parser .nodeName will be all uppercase (e.g. the old Internet Explorer way) versus using the XML parser (application/xhtml+xml) the .nodeName will properly return the element's name as lowercase (unless you're really in to the 90's style or something).

It should also be noted that when you use previousSibling and nextSibling that line breaks alone will create a textNode and those line breaks will mess with CSS (setting the font-size to 5px will generally eliminate this).

If you want all the H2 elements inside the mainDivClass you can use the getElementsByTagName method:

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

This returns all the H2 elements as an array of elements.

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

The h2 value will be used as below:

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

    } 

本文标签： domhow to get value of h2 tag for a div inside other div with id using javascriptStack Overflow