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

Posted 2023-05-07

【中文标题】无法访问可排序列表中子元素的 innerHTML

【英文标题】：Can't access innerHTML of child element in sortable list

【发布时间】：2018-12-15 08:32:09

【问题描述】：

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

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

【参考方案1】：

尝试使用children 而不是childNodes

sortable.children[1]

【参考方案2】：

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

【参考方案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)

【参考方案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>

【讨论】：

虽然.querySelector 确实可以解决这个问题，但它可能比仅仅使用.children 更麻烦一些，而且它肯定不能像默认的数组那样迭代。跨度>