5

I am trying to generate an MD5 check-sum of every element on a page that has the <h2> tag, then display the values as a popup.

The code I have already should get each <h2> element, I just need to get the actual value of each one.

var ghead = document.getElementsByTagName('h2');

for (i=0; i<ghead.length; i++) {
    var gh = ghead[i];
    var ts = gh.toString();
    var ms = b64_md5(ts);
    alert(ts);
    alert(ms);
}

The usage of b64_md5(ts) basically is what converts the ts variable into the MD5 value. However, the ts variable is the ID or name of the Type of Element, not the Element's value itself.

Also, if I wanted to make a cookie that has two values stored in it, a name and a checksum, could I use gh.innerText; to set the unique name, as I have had issues with using this method so far.

Kara
  • 6,115
  • 16
  • 50
  • 57
JamEngulfer
  • 747
  • 4
  • 11
  • 33
  • 1
    If you want the ID of an element, you just ask for it. `gh.id` –  Jul 03 '12 at 12:36
  • Tried `.innerHTML` on the element? That should give you the text/html that is inside the `

    `-tag

     – NoLifeKing Jul 03 '12 at 12:37
  • A few things to remember. First, if you're asking to get some value from an element, show the HTML markup in your question so it is clear what you're talking about. Second, HTML exists on the server. when you're in the DOM, you have objects that were created when the HTML was parsed. The only HTML in the DOM is that which is dynamically generated, and is usually not what you want. –  Jul 03 '12 at 12:47

4 Answers4

13

You can use the innerHTML property to get the HTML contents of an element:

var ts = gh.innerHTML;

Note that h2 elements (and most other elements) don't have a "value". Only elements that behave as form controls have a value property (e.g. the input element).

James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • I think OP wants the `id` of the element. Not the HTML content. –  Jul 03 '12 at 12:43
  • @amnotiam - "However, the ts variable *is the ID or name* of the Type of Element, not the Element's value itself"... to me that sounds like they want the "value" of the element. I assume that means the content. – James Allardice Jul 03 '12 at 12:45
  • Maybe you're right. I hate it when people don't describe and illustrate exactly what they want. –  Jul 03 '12 at 12:50
  • 1
    @amnotiam - Yeah... hard to tell what's actually being asked. I'll leave my answer as it is for now, unless the OP updates the question. – James Allardice Jul 03 '12 at 12:50
  • What I was asking for was the bit that would go inside two

    tags     – JamEngulfer Jul 03 '12 at 13:00
2

To get the textual content of a h2 tag element gh:

var text = gh.childNodes.item(0).data;
Michael Besteck
  • 2,415
  • 18
  • 10
  • It's safer to use `gh.innerText` as it would also return text including line breaks and images in-between. the first child node only contains the text up to the first non text node. – Torsten Walter Jul 03 '12 at 13:15
  • @TorstenWalter I tried that, but when I made the variable pop up in an alert, it only displayed a blank window with an 'ok' button. – JamEngulfer Jul 03 '12 at 14:40
  • @JamEngulfer221, I forgot that this is IE only, sorry for that. A cross browser solution would be `var text = gh.innerText || gh.textContent;`. See this thread for reference: http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox – Torsten Walter Jul 05 '12 at 16:20
1

If you want to access the type of an element you can just ask for this:

gh.nodeName // contains the name of the node in uppercase e.g. "H2"
gh.nodeType // contains the numerical Type of the node e.g. "1"
gh.id       // contains the value of the node's id attribute
gh.name     // contains the value of the name attribute (typically for form elements)

As mentioned below, accessing the actual node content is a different matter:

gh.innerHTML   // contains the full html source within the node
gh.innerText   // (IE only) contains the visible textual content stripped of any html markup
gh.textContent // W3C compliant equivalent of innerText

For cross browser access to the text contents use something like this:

var text = gh.innerText || gh.textContent;
Torsten Walter
  • 5,614
  • 23
  • 26
0

Try it in devtools

document.getElementsByTagName('h2').item(0).innerHTML;

This will return the value of H2

levinjay
  • 106
  • 1
  • 4