將每個 Li 元素轉換成一個 object

Question

我有一個由用戶在頁面上動態生成的游戲的無序列表。 我想要做的是將每個列表項變成一個 object，這樣我就可以存儲他們的名字和分數。 由於我仍在學習 JS，因此在代碼上苦苦掙扎。 我已經得到 function 創建每個 object 但我不知道如何為 John、Paul、Ringo 和 George（或用戶可能添加到列表中的任何其他人）實際創建 object

<ul id="playerList">
     <li>John</li>
     <li>Paul</li>
     <li>Ringo</li>
     <li>George</li>
</ul>  

const createPlayer = (playerName, points) => {return {name, points}}

Answer 1

以下是如何從 html 中獲取每一個li內容，然后對這些數據做任何您想做的事情：

var numberOfPlayers = getElementsByTagName('li').length;
for (i=0 ; i< numberOfPlayers; i++) {
var playerData document.getElementById('playerList').getElementsByTagName('li')[i].innerText;
// create your objects or do whatever you want with playerData
}

根據 Yishmeray 的建議，您也可以根據自己的喜好這樣做：

var playerData = document.querySelectorAll('#playerList li'); 
playerData.forEach(element => { 
var thisPlayerTxt = element.innerText;
//create your objects or do whatever you want with playerData
});

以防萬一您想在列表中創建一個li和 append：

var list = document.getElementById('playerList');
var name = 'John';
var player = document.createElement('li');
player.innerText = name;
list.appendChild(player);