获取深度嵌套属性值

Question

我正在尝试从class=“value=-class=”中获取并更改属性产品“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- 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.

这给了我一个不能访问“值”-attribute的HTMLCollection，以及类似于

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

也不管用。

如何访问value-attribute？我是第一次接触前端，所以我很抱歉可能对HTML DOM的工作方式一无所知。感谢每个人/任何人。

Answer 1

只需使用

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

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

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

Answer 2

谢谢你，@Malagasy_aho，经过一些编辑，我得到了想要的功能：

var tables;
var table;
var name;
var quantity;

tables = document.getElementsByTagName("TABLE")
table = tables[1]
name = table.rows[x].querySelector('[class^="modal-link"]').innerHTML
quantity = table.rows[x].querySelector('[id^="product-item-quan]').value