Question

我有清单：

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

如果他们的内容（'li'标签之间）等于'xyz'，我如何选择'li'标签“ONE BY ONE”进行检查。

element = document.getElementsByClassName('.mates').firstChield.innerHTML;
do {
    if(){
        //do something
    }
}while (element = element.nextSibling);

但是我没有达到选择firstChild的程度。控制台中显示此错误：“无法读取未定义的属性'innerHTML'”。这需要在纯JavaScript中完成。有什么想法吗？

Answer 1

将点放在参数中。像这样：

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

点不是班级名称的一部分。

编辑还注意到问题最初在firstChild中出现错字。

Answer 2

您的element变量不是元素（其值可能为undefined）。如果您像这样使用它应该可以工作：

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

上面的代码修复：

@Renan指出的班级名称
.firstChild

另请注意，getElementsByClassName会返回元素列表，因此您必须抓住列表中的第一个元素（索引0）才能到达<ul>。

最后，请记住，您将循环遍历<ul>的所有子项，包括空文本节点（请参阅http://jsfiddle.net/58ZZF/处的演示）。如果您使用firstElementChild和nextElementSibling，则可以避免这种情况，但我不确定这些属性是否存在跨浏览器问题（MDN仅表示它是Firefox 3.5 +）。

Answer 3

几个错误

getElementsByClassName的班级名称不应为.
firstChild
getElementsByClassName返回一个数组，而不是dom引用
当使用nextSibling它也可以返回文本节点时，你需要检查nodeType以确保元素是一个元素节点（nodeTye = 1），你也可以检查{{1 }}

尝试

tagName  == 'LI'

演示：Fiddle

Answer 4

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

按元素的内容选择元素

4 个答案: