Javascript 如何使用DOM在div中选择元素？

我正在学习DOM，并尝试在div中选择一个li，其中div的ID为“essentials” 我想针对该div中的所有li并更改背景色。我可以改变div本身的背景色，但似乎不能只选择li。这是我的密码：

HTML

使用querySelectorAll

var q=document.querySelectorAll（'#essentials li'）；
控制台日志（'q'+q.length）；
q、 forEach（函数（elem）{
elem.style.backgroundColor='黄色'；
});


a
b
c

现代浏览器为您提供了两个针对DOM元素的出色API：

document.querySelector
（获取一个元素）和
document.queryselectoral
（获取多个元素）

这两种方法允许您使用CSS选择器以DOM元素为目标。例如：

使用以下HTML：



牛奶
蜂蜜
水
酒
啤酒


您可以使用此JavaScript以所需的
li
标记为目标：

var myLiTags=document.querySelectorAll（“#essentials li”）：

现在，要设置目标
li
标记的样式，可以执行以下操作：

myLiTags.forEach（函数（el）{
el.style.backgroundColor=‘黄色’；
});

当然，如果您不需要使用JavaScript执行此操作，那么样式化元素就是CSS的用途：


#李先生{
背景颜色：黄色；
}

将此代码放在HTML文档中与上面的JavaScript代码一样有效，但实际上是设计DOM元素样式的最佳实践方式


如果您不熟悉CSS选择器，
此代码不起作用。@KevMcCall您可以运行代码段并查看它是否起作用。实际上，我已经学习了HTML、CSS和JS课程。我们现在正在学习DOM，这是我们必须做到的。我知道这可以通过CSS轻松实现。谢谢你的帮助！
    <ul>
      <li>milk</li>
      <li class="selected">honey</li>
      <li>water</li>
      <li>wine</li>
      <li>beer</li>
    </ul>
  </div>

document.getElementById('essentials').style.backgroundColor = 'yellow';