Question

我试图从DOM中的Alt元素中获取文本。任何人都可以告诉你最好的方法是什么。我添加了代码。我正在尝试获取产品的详细信息，以便将其放在一个对象中：

<div class="product col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12" alt="0001|Plain White T-Shirt|4.99|M|White|25|Mens-Tshirts">
        <a href="/0001/product">
            <img class="productImage" src="/static/store/images/products/plainWhiteTShirt.jpeg">
        </a>
        <a href="/0001/product">
        <h3>Plain White T-Shirt</h3>
        </a>
        <h4 class="price">£4.99</h4>
        <input type="button" class="button style_one addToCartOne" value="Add To Cart">
    </div>

我需要得到尺寸，价格，颜色等等。

感谢您的帮助

Answer 1

最好的方法是添加一些id

<div id="your_id" class="product ...

在元素上并使用document.getElementById('your_id').getAttribute('alt')代码获取文本值。但是如果不可能，你可以使用属性选择器和类选择器来获得它：

document.querySelector('.product[alt^=0001]').getAttribute('alt')

有关属性选择器的更多信息，请查看here

Answer 2

使用jquery，您可以选择一个属性，然后使用|字符进行拆分，最后分配给一个对象：

＆＃13;

var p = $(".product").attr('alt').split('|')
obj = {
  id: p[0],
  name: p[1],
  price: p[2],
  sex: p[3],
  color: p[4],
  quantity: p[5],
  category: p[6]
}

console.log(obj)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12" alt="0001|Plain White T-Shirt|4.99|M|White|25|Mens-Tshirts">
  <a href="/0001/product">
    <img class="productImage" src="/static/store/images/products/plainWhiteTShirt.jpeg">
  </a>
  <a href="/0001/product">
    <h3>Plain White T-Shirt</h3>
  </a>
  <h4 class="price">£4.99</h4>
  <input type="button" class="button style_one addToCartOne" value="Add To Cart">
</div>

＆＃13;

Answer 3

在Vanilla Javascript中，您可以使用：

document.querySelector('.product[alt]').getAttribute('alt').split('|');

然后你会收到一个可以用map或forEach迭代的数组，如下所示：

document.querySelector('.product[alt]').getAttribute('alt').split('|').map(item => console.log(item))

JS中的alt textContent

3 个答案: