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

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

javascript api dom

使用JavaScript从控制台更改HTML列表项的innerText,javascript,api,dom,console,innertext,Javascript,Api,Dom,Console,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&g

我是编程新手，我一直在寻找解决方案，但我发现比它应该是更复杂的解决方案，我被要求。我有这个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);
}

let toppings=document.querySelectorAll（'pizza toppings li'）；
for（设i=0；i


我不知道如何逐一修改列表中的那些项目。它不应该是任何替换子项，也不应该完全更改列表，而是选择它们并“修改它们”。
也许我用qSelector得到了元素的子元素列表，但仍然不知道如何更正这些元素的拼写。我不能在打印的列表中单击鼠标右键进行编辑
帮忙？谢谢事实上，我们使用#来选择一个id，因此您需要输入列表的id，即配料。匹配项的数组称为toppings，因此需要将循环限制设置为toppings.length。
虽然我建议使用map而不是for循环
let toppings = document.querySelectorAll('#ingredients li');
for (let i = 0; i < toppings.length; i++) {
    console.log(toppings[i].innerText);
}

文档中没有任何元素#比萨配料
。因此，toppings
是空节点列表<代码>成分

是对象，而不是li元素的数组。如果要在

li

上迭代，请尝试以下操作：

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

let-components=document.querySelectorAll（“#components li”）；
对于（设i=0；i

获取所有列表项并对其进行修改的一种方法（前提是您希望对所有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"

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

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

这很有效！我的问题是试图一次将用可视化代码编写的全部代码运行到控制台。所以我必须创建第一个函数，然后更改innertext，在再次运行以打印列表后，我完成了它。我以后会记住这一点。

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"

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