如何使用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);
}

- Vivek Gondliya

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>

- dfsq

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>

- user2575725

Answer 3

1. 你只需要将下面这行代码

   alert(document.getElementById("repoFolder").value); 替换为

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

- sonam gupta

Answer 4

添加以下行：

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

- Vivek