javascript - 如何使用 Javascript 获取 ul li 值

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，即元素的 list。但是，即使您访问了列表中的一个元素，li 元素也没有 value 属性(只有表单控件元素具有此属性)。

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

现在，您想要获取被单击的 li 元素的内容。由于您将事件处理程序绑定(bind)到 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 .它们描述了绑定(bind)事件处理程序的不同方式(内联 ve，事件对象具有哪些属性以及浏览器之间的差异。

注意:内联事件处理程序对于玩具示例是可行的，但是一旦您打算进行一些认真的开发，请使用其他方式来绑定(bind)事件处理程序。