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.

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

Answer 2

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

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

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;