如何使用嵌套类更改webelements列表中每个项目的innerHTML

Question

我正在尝试制作一个javascript webextension，它可以添加几个数字，例如。 “123”到购物网站http://www.tomleemusic.ca上每个产品的超链接文本内部文本的末尾

例如，如果我去这个链接，http://tomleemusic.ca/catalogsearch/result/?cat=0&q=piano

我想在每个产品名称的末尾添加一些数字。 name of product and its nested hyperlink

到目前为止，我尝试了以下代码，但它没有产生任何结果。谢谢你的帮助:)

var products= document.querySelector(".category-products, .products- 
grid category-products-grid itemgrid itemgrid-adaptive itemgrid-3col 
centered hover-effect equal-height");
var productslist = products.getElementsByClassName("item");
for (var i = 0; i < productslist.length; i++) {
    productslist[i].getElementsByClassName("product-name").innerHTML = 
productslist[i].getElementsByClassName("product-name").innerHTML + 
"1234";
}

Answer 1

您的查询错误，您应该使用querySelectorAll而不是querySelector来获取与查询匹配的所有元素。

以下是每个给定站点所需的代码：

var productsListLink = document.querySelectorAll(".products-grid .item .product-name a:not(.product-image)");
for (var i = 0; i < productsListLink.length; i++) {
    var a = productsListLink[i];
    var name = a.innerHTML || "";
    name += "1234";
    a.innerHTML = name;
    a.setAttribute('title', name);
}

Answer 2

我想我找到了你需要的东西。

var products = document.querySelector(".category-products .products-grid.category-products-grid.itemgrid.itemgrid-adaptive.itemgrid-3col.centered.hover-effect.equal-height");
var productslist = products.getElementsByClassName("item");

for (var i = 0; i < productslist.length; i++) {
var productName = productslist[i].getElementsByClassName("product-name")[0].firstChild;
productName.innerHTML = productName.innerHTML + "1234";
}