Li元素不可访问。

Question

Li元素不可访问。

javascripthtml

3

我将尝试访问以下内容中的颜色和大小： {{link1：输入图像描述

}}

这是DOM。

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

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

预期输出为黑色和大号...只获取标题：颜色，尺寸。谢谢。

- Carol Kariuki

1

那么，期望的输出是什么？ - Grundy

虽然ss tagview是个不错的想法，但如果您放置实际代码，那将更加美好。 - Batu.Khan

1

没错，你正在选择主div的textContent，但它没有任何文本。 - Piero Alberto

期望的输出是黑色和大号，但我只得到了颜色和尺寸。@PieroAlberto 我应该怎么做？ - Carol Kariuki

深入DOM，您必须进入主div的子元素（另一个div），再次进入其子元素，在ul上循环并在此处再次循环以查找li :) - Piero Alberto

看起来这些值是动态提供的，而您的选择器在注入值之前执行了。 - Rango

3个回答

1

如果您想要值，请尝试这样做：

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);

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

编辑：这个问题变得混乱是因为在@zelcon5的评论中发布的网站有两个具有相同类名的div元素...其中只有一个设置了display：none，无论如何，请使用以下内容：

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) && nodes[item].parentElement.parentElement.parentElement.style.display !== "none") {
    alert(nodes[item].innerHTML);
    text += nodes[item].innerHTML + ', ';
  }
};

alert(text);

- Sergio Flores

谢谢@byoigres...它可以工作，但它会带有HTML文本...如何排除它并只显示黑色和大号？ - Carol Kariuki

我不明白，如果你运行这段代码，会弹出一个带有文本“BLACK, Large, ”的警告框，你需要什么？ - Sergio Flores

我需要仅包含黑色和大号字体的文本。但我获取到的是来自内部HTML的文本...我该如何替换它并提取出仅包含黑色和大号字体的文本？它们在警告框中出现为最后一个文本。这就是我得到的： - Carol Kariuki

这是我得到的内容：.........还有更多的HTML文本，然后以这样结束 <ul id="ulLineItemSize_21c68461-45e4-4e8e-9e26-6213c281c4b3"> </ul> </dd> </dl> ，蓝色/白色，大号。 - Carol Kariuki

没事了，我已经解决了 :) 非常感谢！ - Carol Kariuki

@CarolKariuki 如果 byoigres 的回答有帮助，请将其标记为正确的答案。 - Logar314159

0

试试这段代码

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"

- Satish Kumar sonker

返回未定义 :( - Carol Kariuki

请确保在执行上述代码时存在类名为“n_ck_s_itemoption_list”的div元素。 - Satish Kumar sonker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zelcon · Accepted Answer

在你的浏览器中打开以下网址：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上的页面，并编写一些真实的程序，例如游戏。