Get the value of an <h2> tag with JavaScript

Question

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.

Narcotic

If you want the ID of an element, you just ask for it. gh.id – Precipitant

Tried .innerHTML on the element? That should give you the text/html that is inside the <h2>-tag – Tyrocidine

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. – Precipitant

Answer 1

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

Janessa

I think OP wants the id of the element. Not the HTML content. – Precipitant

@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. – Janessa

Maybe you're right. I hate it when people don't describe and illustrate exactly what they want. – Precipitant

@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. – Janessa

What I was asking for was the bit that would go inside two <h2></h2> tags – Narcotic

Answer 2

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

var text = gh.childNodes.item(0).data;

Sharice

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. – Vesicant

@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. – Narcotic

@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: #1359969 – Vesicant

Answer 3

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;

Vesicant

Answer 4

Try it in devtools

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

This will return the value of H2

Tuttle