javascript - Getting an anchor value which is inside a li tag - Stack Overflow

admin管理员组

文章数量:1296221

I have the this code:

<li class="email">
    <a href="mailto:[email protected]">[email protected]</a>
</li>

I would like to get the [email protected] 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;

I have the this code:

<li class="email">
    <a href="mailto:[email protected]">[email protected]</a>
</li>

I would like to get the [email protected] 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;

• javascript

Share Improve this question Follow edited May 3, 2012 at 7:34 katspaugh 17.9k1212 gold badges6767 silver badges105105 bronze badges asked May 3, 2012 at 7:13 AlonAlon 3,9061010 gold badges4646 silver badges6565 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

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 [email protected]

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.

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

本文标签： javascriptGetting an anchor value which is inside a li tagStack Overflow