如何使用JavaScript獲取ul li值

Question

我想在使用javascript的alert框中使用li的值（即如果我點擊PHP，它應該在alert框中提醒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

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

您需要iterract這個節點列表，讓每一個元素 例

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

希望它可以幫助你的價值。

Answer 2

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。它們描述了綁定事件處理程序的不同方法（內聯函數，事件對象具有哪些屬性以及瀏覽器之間的區別）。

注意：內聯事件處理程序對於玩具示例是可以的，但只要您要嚴肅對待發展，用其他的方式來綁定事件處理程序。