获取位于li标签内的锚点值

Question

我有以下代码：

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

我想使用纯JavaScript获得abc@gmail.com

我虽然在做document.getElementsByTagName("email") ，但上面却给了我，但是我不知道如何继续。

我设法在用户的以下回答帮助下找到了解决方案

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

演示： http : //jsfiddle.net/ThiefMaster/Cx2VY/

但是，并非在所有浏览器中都提供document.querySelectorAll 。 有些具有document.getElementsByClassName) ，也可以为您工作。 但是其他浏览器都没有。 如果您不希望使用jQuery等，可以考虑添加Sizzle 。它是jQuery和其他库使用的选择器引擎，它减轻了您处理跨浏览器内容的负担。

使用querySelectorAll或Sizzle时，可以通过删除.firstChild并使用选择器.email > a来.firstChild代码。

Answer 2

我的代码有错误，应该是这样才能获得“ a”元素

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

现在您有了电子邮件对象，那么您可以使用像这样的电子邮件对象处理其余的对象

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

Answer 3

您是否需要跨浏览器解决方案？ 跨浏览器多少？

现代浏览器唯一的解决方案是：

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

使用children[0]使您可以爬网元素的子级，而firstElementChild仅获取第一个元素的子级（而不是节点子级，因为空格是节点子级，并且您不希望这样）。

forEach ， getElementsByClassName ， textContent ， firstElementChild甚至querySelectorAll都不跨浏览器（在旧版浏览器中不起作用）。

但是，由于要使用querySelectorAll ，这意味着您至少支持IE9（因为它在IE8中存在问题，而在IE7中未实现）。 IE9支持上面引用的所有方法。

Answer 4

我认为这是跨浏览器：

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