无法访问可排序列表中子元素的 innerHTML

Question

我有一个排序列表是这样的：

<div id = "sortable">

         <div class = "sortableItem day">Monday</div>
         <div class = "sortableItem" id="result1">Hotel 1</div>
         <div class = "sortableItem" id="result2">Hotel 2</div>
         <div class = "sortableItem" id="result3">Hotel 3</div>
         <div class = "sortableItem" id="result4">Hotel 4</div>
         <div class = "sortableItem" id="result5">Hotel 5</div>

</div>

我试图访问的div不同的子元素“排序”，但我只管理的第一个 - 之后，我得到“未定义”返回 P>

因此，当我日志：

sortable.childNodes[1]

我做得到“星期一”在控制台中返回。但只要我将其更改为： P>

sortable.childNodes[2]

（或实际上对于该问题的任何其它指数）得到了一个未定义。我知道我在做什么令人难以置信的基本错误的，但任何指针将不胜感激。 P>

Answer 1

尝试使用children 而不是childNodes

sortable.children[1]

Answer 2

childNodes 包括空格。在尝试获取其innerText（可能与if (sortable.childNodes[x].innerText) { /* use innerText */ } 一样简单）之前，您需要验证该索引处的子节点是一个元素。

Answer 3

正如其他答案已经提到的那样，您访问的是空格而不是元素。

我为您整理了一个小提琴，以便仅获取具有 sortableItem 类的 childNodes :)

https://jsfiddle.net/joshmoxey/g9tebkzw/

const sortable = document.getElementById("sortable")

//create loopable array from childNodes
const childNodes = Array.from(sortable.childNodes)

//filter through the array and remove anything that doesn't have a class of sortableItem as the first class name)
const children = childNodes.filter((node) => node.className ? node.className.startsWith("sortableItem") : false)


//do something with children here
console.log(children)

Answer 4

最简单的方法是使用 querySelector 和 :nth-child 伪选择器

console.log(document.querySelector('#sortable > :nth-child(1)').textContent)
console.log(document.querySelector('#sortable > :nth-child(2)').textContent)
console.log(document.querySelector('#sortable > :nth-child(3)').textContent)

<div id="sortable">

  <div class="sortableItem day">Monday</div>
  <div class="sortableItem" id="result1">Hotel 1</div>
  <div class="sortableItem" id="result2">Hotel 2</div>
  <div class="sortableItem" id="result3">Hotel 3</div>
  <div class="sortableItem" id="result4">Hotel 4</div>
  <div class="sortableItem" id="result5">Hotel 5</div>

</div>