按元素内容选择元素

Question

I have list:

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

How can I select 'li' tags "ONE BY ONE" to be checked if their content (between 'li' tags) is equal to 'xyz'.

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

but I'm not getting even far enough to select firstChild. This error is showing in console: "Cannot read property 'innerHTML' of undefined". This needs to be done in plain JavaScript. Any ideas?

Answer 1

Drop the dot in the parameter. Like this:

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

The dot is not a part of the name of the class.

EDIT also notice that the question originally had a typo in firstChild .

Answer 2

Your element variable is not an element (its value is probably undefined ). It should work if you use it like this:

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

The code above fixes:

• The class name as pointed out by @Renan
• The typo in .firstChild

Also note that getElementsByClassName returns a list of elements, so you have to grab the first one in the list (index 0 ) to reach your <ul> .

Finally, keep in mind that you'll be looping over all children of the <ul> , including empty text nodes (see a demonstration at http://jsfiddle.net/58ZZF/ ). This can be avoided if you use firstElementChild and nextElementSibling , but I'm not sure if there are cross browsers issues with those properties (MDN only says it's Firefox 3.5+).

Answer 3

Few mistakes

1. Class name to getElementsByClassName should not have .
2. Spelling mistake in firstChild
3. getElementsByClassName returns an array, not a dom reference
4. When using nextSibling it could return text nodes also, you need to check the nodeType to make sure the element is a element node(nodeTye = 1), also you can check the tagName == 'LI'

Try

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

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