使用JavaScript从控制台更改HTML列表项的innerText



我是编程新手,一直在寻找解决方案,但我发现的解决方案比应该的更复杂,有人问我。我有这个HTML

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
 </head>
 <body>
  <h3>Pizza toppings:</h3>
  <ul id="ingredients">
   <li>Batsilica</li>
   <li>Tomtato</li>
   <li>Morezarella</li>
   <li>Hams</li>
  </ul>
 </body>
</html>

所以我必须用控制台更换原料。我写了这个,所以我得到了打印列表:

let toppings = document.querySelectorAll('#pizza-toppings li');
for (let i = 0; i < ingredients.length; i++) {
console.log(ingredients[i].innerText);
}

我不知道如何逐一修改清单上的那些项目。它不应该是任何replaceChild,也不应该完全更改列表,而是选择它们并"修改它们"。也许我用qSelector得到了元素的children列表,但仍然不知道如何更正这些元素的拼写。这不像我可以右键点击打印列表并编辑它。

帮助?感谢

事实上,我们使用#来选择一个id,因此您需要放置列表的id,即成分。你的匹配项数组被称为toppings,所以你需要将循环限制设置为toppins.length。尽管我建议使用地图而不是循环

let toppings = document.querySelectorAll('#ingredients li');
for (let i = 0; i < toppings.length; i++) {
console.log(toppings[i].innerText);
}

这将在控制台上显示您的所有项目。但如果你想编辑项目,例如,你想把"Tomtato"改成"Meat",你必须做

toppings[1].innerText="Meat"

文档中没有任何元素#pizza-toppings。因此,toppings是空节点列表。ingredients是对象,而不是li元素的数组。如果你想迭代li,试试这个:

let ingredients = document.querySelectorAll('#ingredients li');
for (let i = 0; i < ingredients.length; i++) { 
console.log(ingredients[i].innerText); }
}

获取所有列表项然后修改它们的一种方法(如果您想对所有li执行相同的操作(是将它们放在一个数组中:

let ingredients = document.getElementById("ingredients").getElementsByTagName("li");
//create empty array:
let ingredients_list = []
//create loop to iterate over every li:
for (let i = 0; i < ingredients.length; i++) {
//create variable to grab the text from each <li>:
let ingredients_text = ingredients[i].innerText;
//add the text from each li to the ingredients_list array:
ingredients_list.push(ingredients_text);
}
// you will now have all of your li's in an array where you can manipulate them as you wish using any array methods. For example, lets convert all of the text to uppercase and then log it to the console using the forEach array method:
ingredients_list.forEach(element => console.log(element.toUpperCase()))
//returns: 
"HAMS"
"BATSILICA"
"TOMTATO"
"MOREZARELLA"

以上只是如何使用forEach方法操作已转换为数组的列表的基本示例。

另一个基本示例是使用join方法在单个字符串中返回数组中的所有项:

console.log(ingredients_list.join(" "))

您可以在左侧导航栏的以下链接中看到可用方法的完整列表:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

我不确定你想对列表项目做什么(最初的问题不是100%清楚(,但希望这能为你指明正确的方向。

最新更新