Получение глубоко вложенных значений атрибутов

Question

Я пытаюсь получить и изменить значение из атрибута value = "1" из class = "product-amount"

<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" 

но я не хочу жестко кодировать каждое количество товара-элемента, я хочу найти всех и каждого динамически, наряду с innerHTML class = "modal-link".

Я тоже пробовал это

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 без возможности доступа к атрибуту "value" и тому подобному

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

тоже не работает.

Как я могу получить доступ к атрибуту значения? Я новичок в front-end, поэтому я прошу прощения за потенциальное невежество относительно того, как работает HTML DOM. Спасибо всем / всем.

Answer 1

Спасибо @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

Answer 2

Просто используйте

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

Он получит значение первого элемента с идентификатором, который начинается с «product-item-amount -».

Вы также можете использовать документ.querySelectorAll, чтобы получить HTMLCollection.