typescript 获取ID和标记的内部HTML

n1bvdmb6 于 2023-01-27 发布在 TypeScript

关注(0)|答案(4)|浏览(285)

使用以下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>

我尝试获取amount的内部HTML值和一个特定的id。例如，id="Red"及其<amount>值。
如何使用JavaScript实现这一点？
我尝试了以下方法，但无法选择要计算金额的ID

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

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

typescript

来源：https://stackoverflow.com/questions/75218937/get-inner-html-to-id-and-tag

4条答案

按热度按时间

z9smfwbn1#

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

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

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

"dialog[type=inventory] #Red amount"

赞(0）回复(0）举报 2023-01-27

2izufjch2#

通过使用querySelector方法，您可以将具有特定id的特定li元素作为目标，然后使用textContent属性访问amount元素中的文本。
示例：

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

赞(0）回复(0）举报 2023-01-27

jslywgbw3#

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

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

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

li#Red > amount

这真的感觉像是XY问题，你要求做一件事，但实际上你只需要做一件事，因为一些更重要的问题。理想情况下，你不应该查找HTML树的内容来找到这样的值，因为它是超级脆弱和不可靠的（例如，如果您需要更改结构的样式等原因，你现在打破了所有这些逻辑，和TypeScript将无法保存/警告你在所有）.
更好的方法是在JavaScript中保留数据模型的副本，然后使用该副本生成HTML。
同样值得注意的是，<name>和<amount>都不是HTML5中的有效标签。您 * 可以 * 创建自定义标签，但它们的名称中必须至少包含一个-字符，例如<inventory-name>而不是<name>。

赞(0）回复(0）举报 2023-01-27

qnakjoqk4#

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

赞(0）回复(0）举报 2023-01-27

我来回答

typescript 获取ID和标记的内部HTML

4条答案

相关问题

热门标签

最新问答