如何用JavaScript获取指定id元素下amount标签的innerHTML值

你可以直接利用CSS选择器的id定位特性，精准获取目标<amount>标签的内容，完全不需要遍历，以下是两种高效实现方案：

方案1：从已有的inventory元素范围内查询（更精准） #

既然已经拿到了inventory对话框元素，直接在它的上下文里用querySelector指定目标li的id，再定位其子元素amount：

let inventory: HTMLElement | null = document.querySelector("dialog[type=inventory]");
// 定位Red对应的amount元素
const redAmount = inventory?.querySelector("#Red > amount");
if (redAmount) {
  console.log(redAmount.innerHTML); // 输出1
}

方案2：利用id全局唯一性直接获取 #

因为HTML规定id是全局唯一的，也可以直接通过getElementById拿到目标li，再查找内部的amount标签：

const redLi = document.getElementById("Red");
const redAmount = redLi?.querySelector("amount");
if (redAmount) {
  console.log(redAmount.innerHTML); // 输出1
}

这两种方案都能直接定位到目标元素，避免了遍历操作，效率更高。

内容的提问来源于stack exchange，提问作者Anne Maier