Obtener un valor de anclaje que está dentro de una etiqueta li

Tengo el este código:

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

Me gustaria conseguir el abc@gmail.com usar JavaScript simple

Pensé en hacer document.getElementsByTagName("email") lo que me da lo anterior, pero no tengo idea de cómo continuar.

Logré encontrar una solución con la ayuda de la siguiente respuesta de un usuario

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

preguntado el 03 de mayo de 12 a las 08:05

4 Respuestas

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

Demostración: http://jsfiddle.net/ThiefMaster/Cx2VY/

Sin embargo, document.querySelectorAll no está disponible en todos los navegadores. Algunos tienen document.getElementsByClassName) que también te serviría. Pero otros navegadores no tienen ninguno. Considere agregar Sizzle si no desea jQuery, etc. Es el motor de selección utilizado por jQuery y otras bibliotecas y le quita la carga de manejar las cosas entre navegadores.

Cuando usas querySelectorAll o Chisporroteo, puede hacer que su código sea aún más fácil eliminando .firstChild y usando el selector .email > a preferiblemente.

contestado el 03 de mayo de 12 a las 08:05

Algo anda mal aquí, document.querySelectorAll('.email'); te devuelve la abc@gmail.com - solo

firstChild devolverá el primero nodo hijo, no elemento hijo. Por lo tanto, es probable que sea un textNode que será devuelto, no teniendo un href atributo. firstElementChild resuelve este problema. Vea el jsfiddle actualizado que se ajusta al ejemplo de OP, no funciona: jsfiddle.net/Ralt/Cx2VY/1 - florián margaine

Su marcado no contenía espacios en blanco dentro del <li> inicialmente. Pero bueno, ¡ahí tenemos otra razón para usar una biblioteca! Es firstElementChild navegador cruzado? - ladrónmaestro

A partir de IE9, al igual que querySelectorAll (buggy en IE8). - florián margaine

Si hay un error en su código, debería ser así para obtener el elemento "a"

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

ahora tiene el objeto de correo electrónico, luego puede procesar el resto usando un objeto de correo electrónico como este

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

contestado el 03 de mayo de 12 a las 08:05

Cuidado, esto no funciona. Lo siguiente funcionaría: document.getElementsByClassName('email')[0].getElementsByTagName('a')[0];, pero esto solo obtendría el primero email clase. - florián margaine

¿Necesita una solución de navegador cruzado? ¿Cuánto navegador cruzado?

La única solución del navegador moderno sería:

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

Usar children[0] te hace arrastrar a los hijos del elemento, mientras firstElementChild solo obtiene el primer elemento secundario (y no el nodo secundario, ya que un espacio es un nodo secundario y no desea eso).

forEach, getElementsByClassName, textContent, firstElementChild o incluso querySelectorAll no son multinavegador (no funcionan en navegadores heredados).

Pero como quieres usar querySelectorAll, eso significa que al menos es compatible con IE9 (ya que tiene errores en IE8 y no está implementado en IE7). IE9 es compatible con todos los métodos citados anteriormente.

contestado el 03 de mayo de 12 a las 08:05

Creo que esto es más cruzado:

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

contestado el 03 de mayo de 12 a las 08:05

Horrible rendimiento aunque ya que siempre itera todo el DOM incluso si hay mejores funciones disponibles. Sin embargo, es por eso que sugerí sizzle: es bastante estúpido rechazar el uso de una pequeña biblioteca altamente optimizada solo porque desea escribir todo por su cuenta. - ladrónmaestro

@ThiefMaster Lo acabo de publicar porque mencionaste el problema entre navegadores. Esto es lo que trae una búsqueda rápida en Google. Nunca dije que fuera una buena solución, pero con IE puede valer la pena tener una función que sea muy cruzada entre navegadores. - 11684

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.