无法在JavaScript中使用getElementById检索li或ul

Question

I can get an HTML object using JavaScript using the function document.getElementById('id'). If I get a form, then I can further specify an element in the form by doing something like the following:

document.getElementById('form_id').form_element.value="hello world";

This works if the elements in the form are inputs and text areas. (I haven't tried them all...) However, this doesn't work for unordered lists or list elements. I can't specify an li element once I get an element using a form. Does anyone know why that is? Also, the unordered list is used across different forms, so I can't give it a unique id. (Unless I copy paste code everywhere...)

Answer 1

You can run .getElementsByTagName('ul') on any DOM element. For example, using the following HTML:

<form id="form_id">
    <input name="form_element"/>
    <ul>
        <li>foo</li>
        <li>bar</li>
    </ul>
</form>

Do this:

var form = document.getElementById('form_id');
form.form_element.value = 'hello world';

var ul = form.getElementsByTagName('ul');
ul = ul && ul[0];
console.log(ul);

var lis = form.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
    console.log(lis[i].innerText);
}

jsFiddle here: http://jsfiddle.net/YSpVg/1/