如何使用getElementById獲取ul標簽中的li標簽的值

Question

在這段代碼中我得到警告0而不是'abc'

<ul>
    <li>First Node</li>
    <li id="repoFolder" value="abc">Lazy Node</li>
</ul>
<button onclick="rootFolder()">Click Me</button>

JS：

function rootFolder() {
    alert(document.getElementById("repoFolder").value);
}

Answer 1

您需要讀取屬性值，因為HTMLLiElement沒有value屬性：

document.getElementById("repoFolder").getAttribute("value");

由於在li標簽的規范中沒有定義value屬性，因此最好使用data-attribute（使用.getAttribute("data-value") ）：

<li id="repoFolder" data-value="abc">Lazy Node</li>

那么HTML將是有效的，IDE將不會抱怨未知屬性。

查看下面的演示。

 function rootFolder() { alert(document.getElementById("repoFolder").getAttribute('data-value')); } 

 <ul> <li>First Node</li> <li id="repoFolder" data-value="abc">Lazy Node</li> </ul> <button onclick="rootFolder()">Click Me</button> 

Answer 2

嘗試使用getAttribute() ：

 function rootFolder() { alert(document.getElementById("repoFolder").getAttribute('value')); } 

 <ul> <li>First Node</li> <li id="repoFolder" value="abc">Lazy Node</li> </ul> <button onclick="rootFolder()">Click Me</button> 

Answer 3

1. 您只需要更換線路

   警報（的document.getElementById（ “repoFolder”）值。）; 同

   警報（的document.getElementById（ “repoFolder”）的getAttribute（ '值'）。）;

Answer 4

添加以下行：

alert(document.getElementById("repoFolder").getAttribute('value'));