Getting an anchor value which is inside a li tag

Question

I have the this code:

<li class="email">
    <a href="mailto:abc@gmail.com">abc@gmail.com</a>
</li>

I would like to get the abc@gmail.com using plain JavaScript

I though of doing document.getElementsByTagName("email") which gives me the above, but I don't have an idea how to continue.

I have managed to find a solution with the help of the below answer by a user

var elem = document.querySelectorAll('.email');
var email = elem[0].children[0].innerHTML;

Answer 1

var elems = document.querySelectorAll('.email');
for(var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    console.log(elem.firstElementChild.getAttribute('href').substr(7));
}

Demo: http://jsfiddle.net/ThiefMaster/Cx2VY/

However, document.querySelectorAll is not available in all browsers. Some have document.getElementsByClassName) which would also work for you. But other browsers have neither. Consider adding Sizzle if you don't want jQuery etc. It is the selector engine used by jQuery and other libs and takes away the burden of handling the cross-browser stuff from you.

When using querySelectorAll or Sizzle, you could make your code even easier by removing .firstChild and using the selector .email > a instead.

Answer 2

I there is a mistake on your code, that should be like this to get the "a" element

var email=document.getElementsByClassName('email')[0].getElementsByTagName('a')[0];

now you have the email object, then you can process the rest using email oblject like this

 alert(email.innerHTML); // will print abc@gmail.com

Answer 3

Do you need a cross browser solution? How much cross-browser?

Modern browser only solution would be:

[].forEach.call( document.getElementsByClassName( 'email' ), function( el ) {
    console.log( el.firstElementChild.textContent );
} );

Using children[0] makes you crawl the children of the element, while firstElementChild only gets the first element child (and not node child, since a space is a node child and you don't want that).

forEach , getElementsByClassName , textContent , firstElementChild or even querySelectorAll are not cross-browser (don't work in legacy browsers).

But since you want to use querySelectorAll , that means you're supporting IE9 at least (since it's buggy in IE8 and not implemented in IE7). IE9 supports all the method quoted above.

Answer 4

I think this is more cross-browser:

function getElsByClassName(classname){
    var rv = []; 
    var elems  = document.getElementsByTagName('*')
    if (elems.length){
        for (var x in elems ){
            if (elems[x] && elems[x].className && elems[x].className == classname){
                rv.push(elems[x]);
            }
        }
    }
    return rv; 
}

//Get the li
var li = getElsByClassName("email"); //Alass, it returns an array
var a = li[0].firstChild; 
var email = a.getAttribute('href').substr(7);