navigating the dom javascript specific tag

Question

Here it is DOM structure:

<div id="some">
 <a href="#" style="color:red;">NOTHIS</a>
 <a href="#" style="color:red;">NOTHIS</a>
 <h3 class="myclass"><a href="#" style="color:red;">HELLO</a></h3>
</div>

How can I get the value of HELLO in javascript?

EDIT: Forgot, I have other anchor tags inside 'some', so I want strictly the anchor tag inside the h3's

EDIT2: Got it:

var n = document.getElementById('some').getElementsByTagName('h3')[0].getElementsByTagName('a')[0].innerHTML;

Thanks all!

Answer 1

var linkText = document.getElementById('some').getElementsByTagName('a')[0].innerHTML;

or if you have jQuery

var linkText = $('#some').find('a').html();

Answer 2

Propagate down the DOM from your ID.

var s = document.getElementById('some').getElementsByTagName('h3')[0].getElementsByTagName('a')[0].innerHTML;

I would put an ID on the a myself.

Answer 3

var anchor = document.getElementById('some').getElementsByTagName('a')[0],
    yourText = anchor.innerText || anchor.textContent;

It's cross-browser, too. http://www.quirksmode.org/dom/w3c_html.html

Answer 4

var shouldEqualHello = document.getElementById('some').getElementsByTagName('h3')[0].getElementsByTagName('a')[0].innerHTML;

edit: fixed

Answer 5

to get to a single dom element with javascript, you need a way to uniquely identify it. the ideal approach is to give your element a unique id.

<a id="myAnchor" href="#" style="color:red;">HELLO</a>

then you can directly obtain a reference in script.

var myAnchor = document.getElementById('myAnchor');

or if you are guaranteed that your element is the only anchor element within the "some" id you can do

var someDiv = document.getElementById('some');
var anchors = someDiv.getElementsByTagName('a'); // returns a list of anchor elements
var myAnchor = anchors[0]; // get the first element in the list

but since that's not the case you'll have to pick your way down through the dom some more.

var someDiv = document.getElementById('some');
var headers = someDiv.getElementsByTagName('h3');
var myH3 = headers[0];
var anchors = myH3 .getElementsByTagName('a'); // returns a list of anchor elements
var myAnchor = anchors[0]; // get the first element in the list

from there you can see the stuff between the tags with

alert(myAnchor.innerHTML);

or

alert(myAnchor.firstChild.nodeValue);

or some other method already mentioned here.