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。

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

深入嵌套属性值

2 个答案: