javascript - 获取深度嵌套的属性值

Question

我正在尝试从 class="product-quantity"的属性 value="1"获取和更改值

<div class="product-list-content">
 <div class="product-items">
  <table class="product-items" data-list="291156" data-list- 
    mode="grouped">
    <tr class="product" data-product="11917" data-from-none="" data- 
      quantity="1" data-tr-location="Product List">
      <td class="product-quantity">
        <div>
            <label for="product-item-quantity-11917" class="sr- 
                only">Antall Gourmet Grovbrød</label>
            <input aria-live="assertive" id="product-item-quantity-11917" 
                data-action="set-quantity" value="1" maxlength="3" 
            ...
        </div>
      </td>

    ...

      <td class="product-info">
        <a href="/produkter/11917-brodverket-gourmet-grovbrod-oppskaret/" 
         class="modal-link">Gourmet Grovbrød</a>
     </td>
  </tr>

这个有效:

document.querySelector("#product-item-quantity-11917").value = "2" 

但我不想对每个产品元素数量进行硬编码，我想动态地找到每个人，连同 class="modal-link"的 innerHTML。

这个我也试过

var tables; 
tables = document.getElementsByTagName("TABLE")
var table;
table = tables[1] //"product"-table
table.rows[x].getElementsByClassName("product-quantity") //let x be some 
//integer in the range of rows.

这给了我一个 HTMLCollection 没有访问“值”属性的能力，以及任何类似的东西

table.rows[x].getElementsByClassName("product-quantity").getAttribute("value")

也不行。

如何访问值属性？我是前端的新手，所以对于对 HTML DOM 工作原理的潜在无知，我深表歉意。谢谢大家/任何人。

Answer 1

就用

document.querySelector('[id^="product-item-quantity-"]').value

它将获取第一个 ID 以“product-item-quantity-”开头的元素的值。

您还可以使用 document.querySelectorAll 获取 HTMLCollection。