javascript - 浏览 DOM : selecting ul childrens

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>

还有一个脚本，console.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);