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

Question

我是编程新手，我一直在寻找解决方案，但我发现的解决方案比应有的更复杂，有人问我。我有这个 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 也不应该完全改变列表，而是选择它们并 "modifying them"。也许我用 qSelector 得到了元素的子列表，但仍然不知道如何更正这些元素的拼写。这不像我可以在打印列表中右键单击并编辑它。

帮忙？谢谢

Answer 1

事实上，我们使用 # 来 select 一个 id，因此您需要输入您列表的 id，即成分。你的匹配项数组称为浇头，因此你需要将循环限制设置为 toppings.length。虽然我建议使用 map 而不是 for 循环

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"

Answer 2

您的文档中没有任何元素 #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); }
}

Answer 3

获取所有列表项然后修改它们的一种方法（前提是您要对所有 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 方法 return 将数组中的所有项目都放在一个字符串中：

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

您可以在左侧导航栏的以下 link 查看可用方法的完整列表：

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

我不确定你想对列表项做什么（原来的问题不是 100% 清楚）但希望这能为你指明正确的方向。

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

Change innerText of HTML list items from console with JavaScript

javascript

api

dom

console

innertext