获取内部 HTML 到 id 和标签

Question

使用以下 TypeScript 代码

let inventory: HTMLElement = document.querySelector("dialog[type=inventory]");

我得到以下 HTML 元素

<dialog type="inventory">
   <button type="button">Exit</button>
   <ul>
      <li id="Blue">
         <name>Blue item</name>
         <amount>2</amount>
      </li>
      <li id="Red">
         <name>Red item</name>
         <amount>1</amount>
      </li>
   </ul>
</dialog>

我正在尝试获取金额和特定 ID 的内部 HTML 值。 例如， id="Red"及其<amount>值。

如何使用 JavaScript 完成此操作？

我尝试如下，但后来我不能 select 我想要金额的 id

inventory: HTMLElement = document.querySelector("dialog[type=inventory] > ul > li > amount");
console.log(inventory.innerHTML); // Prints amount 2

我可以想象使用querySelectorAll()并循环遍历值，但应该有更好的解决方案。

Answer 1

您可以将 ID 添加到您的选择器：

"dialog[type=inventory] > ul > li#Red > amount"

您也可以简化，因为您不需要树中的所有元素，只需要允许选择的元素。

"dialog[type=inventory] #Red amount"

Answer 2

通过使用 querySelector 方法，您可以定位具有特定 id 的特定 li 元素，然后使用 textContent 属性访问 amount 元素中的文本。

例子：

let inventory = document.querySelector("dialog[type=inventory]");
let element= inventory.querySelector("li#Red");
let amount = element.querySelector("amount").textContent;

Answer 3

正如另一个回答者所说，您可以在选择li元素时将 ID 添加为要求：

dialog[type=inventory] > ul > li#Red > amount

但是，由于页面上同一时间只能有一个具有相同 ID 的元素，因此实际上可以将其简化为

li#Red > amount

---

不过，这确实感觉像是一个 XY 问题，您要求做一件事，但实际上您只是因为一些更大的首要问题才需要这样做。 理想情况下，您不应该查找 HTML 树的内容来查找这样的值，因为它非常脆弱且不可靠（例如，如果您出于样式原因需要更改结构等，您现在会破坏所有这些逻辑，并且TypeScript 根本无法保存/警告您）。

更好的方法是在 JavaScript 中保留数据 model 的副本，然后使用它生成 HTML。

---

还值得注意的是， <name>和<amount>都不是 HTML5 中的有效标签。您可以创建自定义标签，但它们的名称中必须至少包含一个-字符，例如<inventory-name>而不是<name> 。

Answer 4

const amount = document.querySelector("dialog[type='inventory'] ul #Red amount").innerHTML;
console.log(amount); // Prints "1"