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和其他lib使用的选择器引擎，并且减轻了处理跨浏览器内容的负担。

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

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

获取li标签内的锚值

4 个答案: