js怎么去li里面的值

使用JavaScript获取li元素中的值的方法有很多种，最常用的包括：通过ID选择器获取、通过类选择器获取、通过标签选择器获取、使用querySelector获取、使用querySelectorAll获取。这些方法可以满足各种场景需求，下面详细介绍其中一种方法：通过ID选择器获取。

通过ID选择器获取li元素的值相对简单，只需给li元素一个唯一的ID，然后通过JavaScript的document.getElementById方法获取该元素，再通过innerText或innerHTML属性获取其值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get li value</title>
</head>
<body>
    <ul>
        <li id="item1">Item 1</li>
        <li id="item2">Item 2</li>
        <li id="item3">Item 3</li>
    </ul>
    <script>
        // 获取li元素的值
        var item1Value = document.getElementById("item1").innerText;
        console.log(item1Value); // 输出：Item 1
    </script>
</body>
</html>

一、通过ID选择器获取

通过ID选择器获取li元素的值是最简单的方式。只需在HTML中给li元素添加唯一的ID，然后使用JavaScript的document.getElementById方法即可。

在上述代码示例中，我们给第一个li元素添加了ID“item1”，然后使用JavaScript的document.getElementById("item1").innerText获取该li元素的文本值，并将其打印到控制台。

这种方法适用于需要获取特定li元素值的场景，但如果需要获取多个li元素的值，使用其他选择器或循环可能会更高效。

二、通过类选择器获取

通过类选择器获取li元素的值非常适合需要获取多个具有相同类名的li元素值的情况。首先，我们给li元素添加相同的类名，然后通过document.getElementsByClassName方法获取这些元素，并通过遍历来获取每个li元素的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get li value</title>
</head>
<body>
    <ul>
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>
    <script>
        // 获取所有具有类名为item的li元素
        var items = document.getElementsByClassName("item");
        for (var i = 0; i < items.length; i++) {
            console.log(items[i].innerText);
        }
    </script>
</body>
</html>

在这段代码中，我们给每个li元素添加了相同的类名“item”，然后使用document.getElementsByClassName("item")方法获取所有具有该类名的li元素，并通过循环遍历获取每个li元素的文本值。

三、通过标签选择器获取

通过标签选择器获取li元素的值适用于获取所有li元素值的情况。可以使用document.getElementsByTagName方法获取所有li元素，并通过遍历来获取每个li元素的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get li value</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        // 获取所有li元素
        var items = document.getElementsByTagName("li");
        for (var i = 0; i < items.length; i++) {
            console.log(items[i].innerText);
        }
    </script>
</body>
</html>

在这段代码中，我们通过document.getElementsByTagName("li")方法获取所有li元素，并通过循环遍历获取每个li元素的文本值。

四、使用querySelector获取

querySelector方法用于获取第一个匹配指定选择器的元素。如果需要获取特定li元素的值，可以使用适当的选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get li value</title>
</head>
<body>
    <ul>
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>
    <script>
        // 获取第一个具有类名为item的li元素
        var item = document.querySelector(".item");
        console.log(item.innerText);
    </script>
</body>
</html>

在这段代码中，我们使用document.querySelector(".item")方法获取第一个具有类名“item”的li元素，并获取其文本值。

五、使用querySelectorAll获取

querySelectorAll方法用于获取所有匹配指定选择器的元素。如果需要获取所有符合条件的li元素的值，可以使用该方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get li value</title>
</head>
<body>
    <ul>
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>
    <script>
        // 获取所有具有类名为item的li元素
        var items = document.querySelectorAll(".item");
        items.forEach(function(item) {
            console.log(item.innerText);
        });
    </script>
</body>
</html>

在这段代码中，我们使用document.querySelectorAll(".item")方法获取所有具有类名“item”的li元素，并通过forEach方法遍历获取每个li元素的文本值。

六、结合项目管理系统

在实际项目中，可能需要结合项目管理系统来获取li元素的值。例如，在使用研发项目管理系统PingCode或通用项目协作软件Worktile时，可以通过API接口获取项目数据，并将数据展示在页面的li元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Data</title>
</head>
<body>
    <ul id="project-list">
        <!-- 项目数据将动态插入到这里 -->
    </ul>
    <script>
        // 模拟获取项目数据
        var projectData = [
            { id: 1, name: "Project 1" },
            { id: 2, name: "Project 2" },
            { id: 3, name: "Project 3" }
        ];
        // 获取ul元素
        var projectList = document.getElementById("project-list");
        // 动态插入项目数据到ul元素中
        projectData.forEach(function(project) {
            var li = document.createElement("li");
            li.innerText = project.name;
            projectList.appendChild(li);
        });
        // 获取所有li元素的值
        var items = document.querySelectorAll("#project-list li");
        items.forEach(function(item) {
            console.log(item.innerText);
        });
    </script>
</body>
</html>

在这段代码中，我们模拟获取项目数据，并动态将数据插入到ul元素中。然后通过querySelectorAll方法获取所有li元素的值。

综上所述，使用JavaScript获取li元素的值有多种方法，包括通过ID选择器获取、通过类选择器获取、通过标签选择器获取、使用querySelector获取、使用querySelectorAll获取。根据具体需求选择适当的方法，可以高效地获取li元素的值。