李元素无法访问

Question

我正在尝试访问以下颜色和大小：

这是DOM

这是我的代码。它只输出颜色和大小，没有值。请帮忙。

t.desc= e.querySelector(".n_ck_s_itemoption_list").textContent.replace(/\'/g, '');
console.log("Values",t.desc);

预期输出是黑色和大...只获得标题：颜色，大小。感谢。

Answer 1

在你给我网址后编辑

导航到您的网址：http://www.forever21.com/Checkout/Basket.aspx?br=f21

并将其放入控制台

var productDetails = function() {
  var itemTitle = document.querySelector(".s_itemname > h1").textContent

  var item = document.querySelectorAll("div.n_ck_s_itemoption_list")[1]

  var color = item.querySelector("div > ul:nth-child(1) > li:nth-child(2)").textContent

  var size = item.querySelector("div > ul:nth-child(2) > li:nth-child(2)").textContent

  return {
    itemTitle: itemTitle,
    color: color,
    size: size
  }
}

然后测试它......

要好好学习Javascript，请研究MDN上的页面并编写一些真实的程序，比如游戏。

Answer 2

如果您想要值，请尝试：

＆＃13;

＆＃13;

var nodes = document.querySelectorAll(".n_ck_s_itemoption_list > div  > ul li:last-child");
var text = '';
for(var item in nodes) {
  if (nodes.hasOwnProperty(item)) {
    console.log(nodes[item].innerHTML);
    text += nodes[item].innerHTML + ', ';
  }
};

alert(text);

＆＃13;

<div class="n_ck_s_itemoption_list">
  <div>
    <ul>
      <li>color</li>
      <li>BLACK</li>
    </ul>
    <ul>
      <li>size</li>
      <li>Large</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：这让您感到困惑，因为您在@ zelcon5评论中发布的website有两个具有相同类的div元素...其中只有一个设置为{{1无论如何使用这个：

display: none

Answer 3

试试此代码

var uls=document.querySelector(".n_ck_s_itemoption_list").getElementsByTagName('ul');
uls[0].getElementsByTagName('li')[0].textContent //retun "color"
uls[0].getElementsByTagName('li')[1].textContent //retun "Black"
uls[1].getElementsByTagName('li')[0].textContent //retun "Size"
uls[1].getElementsByTagName('li')[1].textContent //retun "Large"