如何使用JS将li元素转换为JSON格式？

先看示例HTML结构：

<ul id='list'>
    <li>city1</li>
    <li>city2</li>
    <li>city3</li>
    <li>city4</li>
</ul>

我们需要提取所有<li>的文本内容，转换为["city1","city2","city3","city4"]这样的JSON字符串，以下是两种可行的实现方式：

方法一：简洁的现代API写法 #

// 选中目标ul下的所有li元素
const liElements = document.querySelectorAll('#list li');
// 转换为数组并提取文本内容（去除多余空白）
const cityList = Array.from(liElements).map(item => item.textContent.trim());
// 转为JSON字符串
const jsonOutput = JSON.stringify(cityList);

console.log(jsonOutput); // 输出目标JSON字符串

代码说明 #

• document.querySelectorAll('#list li')：精准选中id为list的ul下所有li元素，返回类数组对象
• Array.from()：将类数组的元素集合转为真正的数组，方便使用数组方法
• map()：遍历每个li元素，提取其文本内容并通过trim()去除首尾空白（避免HTML换行/空格影响结果）
• JSON.stringify()：将数组转为标准的JSON格式字符串

方法二：兼容性更好的传统写法 #

如果需要兼容旧版浏览器，可以用传统DOM遍历方式：

// 获取目标ul元素
const listContainer = document.getElementById('list');
// 获取ul下的所有li元素集合
const liElements = listContainer.getElementsByTagName('li');
const cityList = [];

// 遍历集合提取文本
for (let i = 0; i < liElements.length; i++) {
    cityList.push(liElements[i].textContent.trim());
}

// 转为JSON字符串
const jsonOutput = JSON.stringify(cityList);

console.log(jsonOutput);

内容的提问来源于stack exchange，提问作者Евгений Черник