CODEWITHSUNDEEP
javascriptdom
vultur12
vultur12

Reputation: 11

navigating the dom javascript specific tag

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!

Upvotes: 1

Views: 2413

Answers (6)

Dharanidharan.B
Dharanidharan.B

Reputation: 11

You could simply use query selector,

let result = document.querySelector('#some h3 a').innerText;
console.log(result);

Upvotes: 0

lincolnk
lincolnk

Reputation: 11238

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.

Upvotes: 0

castis
castis

Reputation: 8223

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

edit: fixed

Upvotes: 0

Dustin Laine
Dustin Laine

Reputation: 38503

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.

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359776

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

Upvotes: 1

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

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

or if you have jQuery

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

Upvotes: 5

Related Questions