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

how to get value of li tag which is in ul tag using getElementById

本文关键字：标签 li ul 何使用 getElementById 获得      更新时间：2023-09-26

在这段代码中，我得到警报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);
}

您需要读取属性值，因为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>

尝试使用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>

  1. 你只需要替换行

    警报(. getelementbyid("repoFolder")value);

    警报(. getelementbyid (repoFolder) .getAttribute("价值")),

添加以下行:

alert(document.getElementById("repoFolder").getAttribute('value'));
相关文章：