如何使用getElementById获取ul标签中的li标签的值

Question

在此代码中，我处于警报0而不是＆＃39; abc＆＃39;

<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");

由于value标记的规范中未定义li属性，因此最好使用数据属性（使用.getAttribute("data-value")）：

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

然后HTML将有效，IDE不会抱怨未知属性。

查看下面的演示。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用getAttribute()：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

1. 您只需要替换

   行

   警报（的document.getElementById（ “repoFolder”）值。）; 与

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

Answer 4

添加以下行：

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