Question

我想使用javascript在警告框中取一个li的值。（即如果我点击PHP它应该在警告框中警告php）。但它显示未定义。请有人帮忙解决这个问题。

我的代码是

<script type="text/javascript">
    function lang1()
    {
    var a = document.getElementsByTagName("li").value;
    alert(a);
    }
</script>

<form>
    <ul id="language" onclick="lang1();">
        <li>PHP</li>
        <li>ASP</li>
        <li>JAVA</li>
        <li>CQ5</li>
    </ul>     
</form>

Answer 1

getElementsByTagName会返回NodeList，即列表元素。但即使您访问了列表中的一个元素，li元素也没有value属性（只有表单控件元素具有此属性）。

您可以使用.innerHTML或.textContent / .innterText来访问HTML元素的内容。

现在，您想要获取被点击的li元素的内容。由于您将事件处理程序绑定到ul元素，this将始终引用事件处理程序中的ul元素。
但是您可以通过访问target (or srcElement (IE)) property of the event object来获取触发事件的元素。

兼容W3C的浏览器将事件对象作为参数传递给事件处理程序。在较旧的IE版本中，事件对象可用作全局变量window.event。由于您使用的是内联事件处理程序，因此在这种情况下没有任何区别。

<script type="text/javascript">
    function lang1(event) {
        var target = event.target || event.srcElement;
        alert(event.target.innerHTML);
    }
</script>

<form>
    <ul id="language" onclick="lang1(event);">
        <li>PHP</li>
        <li>ASP</li>
        <li>JAVA</li>
        <li>CQ5</li>
    </ul>     
</form>

DEMO

我建议您阅读the excellent articles about event handling on quirksmode.org。它们描述了绑定事件处理程序的不同方式（内联，事件对象具有哪些属性以及浏览器之间的差异。

注意：内联事件处理程序适用于玩具示例，但只要您要进行一些认真的开发，请使用其他方法绑定事件处理程序。

Answer 2

document.getElementsByTagName() return a node list not an element.

您需要执行此节点列表以获取每个元素的值示例

var elementsLI = document.getElementsByTagName('li')
var length = document.getElementsByTagName('li').length;
for(var i = 0; i <= length ; ++i){
alert(elementsLI[i].value);
}

希望它对你有所帮助。

如何使用Javascript获取ul li值

2 个答案: