Question

假设我有一个嵌套<ul>，如下所示：

 <ul>
    <ul class="pizzatype">
      <h1>Margherita</h1>
      <li class="ingredient">Tomato sauce</li>
      <li class="ingredient">Mozzarella</li>
      <li class="ingredient">Origano</li>
    </ul>
    <ul class="pizzatype">
      <h1>Spicy salamino</h1>
      <li class="ingredient">Tomato sauce</li>
      <li class="ingredient">Mozzarella</li>
      <li class="ingredient">Salamino</li>
    </ul>
    <ul class="pizzatype">
      <h1>Onion n' Tuna</h1>
      <li class="ingredient">Tomato sauce</li>
      <li class="ingredient">Mozzarella</li>
      <li class="ingredient">Tuna</li>
      <li class="ingredient">Onion</li>
    </ul>
  </ul>

一个脚本，控制台.log类“pizzatype”的孩子：

var pizzatype = document.querySelectorAll('.pizzatype');
console.log(pizzatype[1].children[3]);

children [3]的console.log返回：<li class="ingredient">Salamino</li>

但我正在寻找一个只返回Salamino

的参数

任何人都可以提供帮助吗？

此外，是否有任何参考网站，我可以咨询，从儿童功能开始，找出可以询问的参数？像children.text，children.value等

Answer 1

使用textContent获取元素的文本

console.log(pizzatype[1].children[3].textContent);

Answer 2

您目前正在做的是指向自己的li元素。您需要定位此元素的文本。

您可以使用.innerText执行此操作。您还可以使用.innerHTML，它将以原始格式返回文本，并且不会自动编码/解码文本。

console.log(pizzatype[1].children[3].innerHTML);

浏览DOM：选择ul儿童

2 个答案: