Javascript 按元素的内容选择元素

我有一份清单：

<ul class='mates'>
   <li class='m' id='1'>Jakub</li>
   <li class='f' id='2'>Vinnie</li>
   <li class='m' id='3'>David</li>
</ul>

---

但我还没能选择第一个孩子。控制台中显示此错误：无法读取未定义的属性“innerHTML”。这需要在纯JavaScript中完成。有什么想法吗？

在参数中删除点。像这样：

element = document.getElementsByClassName('mates').firstChild.innerHTML;

点不是类名称的一部分

编辑还要注意，问题最初在firstChild中有一个输入错误。

您的元素变量不是元素，它的值可能未定义。如果您这样使用它，它应该可以工作：

var element = document.getElementsByClassName('mates')[0].firstChild;
do {
    if(element.innerHTML == 'foo'){
        //do something
    }
} while (element = element.nextSibling);

上面的代码修复了：

@Renan指出的类名 第一个孩子的打字错误 还要注意的是，getElementsByClassName返回一个元素列表，因此必须获取列表索引0中的第一个元素才能到达您的位置

最后，请记住，您将在的所有子节点上循环，包括空文本节点。请参阅的演示。如果您使用firstElementChild和nextElementSibling，这是可以避免的，但我不确定这些属性是否存在跨浏览器问题MDN只说它是Firefox 3.5+。

很少有错误

getElementsByClassName的类名不应具有。 第一个孩子的拼写错误 getElementsByClassName返回数组，而不是dom引用 当使用nextSibling时，它还可以返回文本节点，您需要检查以确保元素是元素nodenodeTye=1，还可以检查标记名=='LI' 试一试

---

演示：

为什么不能使用jQuery？评估。它必须是普通的JavaScript。我比我更喜欢这个答案。5-“.mates”应该是像你一样的“mates”。你如何从DOM中删除这个元素？很抱歉回复太晚。代替警戒线，让它成为mates.children[i].parentNode.removeChildmates.children[i]；

var element = document.getElementsByClassName('mates')[0].firstChild;
do {
    if(element.innerHTML == 'foo'){
        //do something
    }
} while (element = element.nextSibling);

var element = document.getElementsByClassName('mates')[0].firstChild;
do {
    if(element.nodeType == 1){
        console.log(element.textContent)
    }
}while (element = element.nextSibling);

<ul class='mates'>
   <li class='m' id='1'>Jakub</li>
   <li class='f' id='2'>Vinnie</li>
   <li class='m' id='3'>David</li>
</ul>
<script>
var mates = document.getElementsByClassName('mates')[0];
for (var i=0; i< mates.childNodes.length; i++){
    if(mates.children[i].innerHTML == 'Vinnie') alert("Got you! ID "+mates.children[i].id)
}
</script>