Question

我正在尝试做一些简单的事情，但是找不到我需要的帮助：我有一个列表，我想从中创建一个数组；

基本上，我的html的正文是：

 <section>
    <ul id="idListe">
        <li>de l'amour</li>
        <li>de la joie</li>
        <li>des blablous</li>
        <li>des bisous</li>
        <li>des copains</li>
    </ul>
</section>

我的JavaScript现在是：

// console
var liste = document.querySelector('#idListe');
var collLi = liste.children;
var tablO = []; // dans ce tableau je cherche a mettre les valeurs de la liste ('de l\'amour', 'de la joie', 'des blablous', etc...)


// get properties, it's not what I want
for(var li in collLi) {
     tablO.push(li); // ajout a mon tableau (vide initialement)
     console.log(li); //  renvoie pas ce que je veux
 }

我有财产，不是孩子。我认为我必须查询

元素的innerHTML，但是找不到合适的方法来做..

我认为我的问题在那里：

var collLi = liste.children;

您能按正确的方向进行搜索吗？目前，我正在尝试使用： list.firstChild list.nextSibling ..

谢谢！

这是一个小提琴，我的工作内容是： https://jsfiddle.net/32o0rd7k/11/

Answer 1

使用Document.querySelectorAll()获取列表项，使用Array.from()转换为数组，并使用map转换为数组：

const result = Array.from(document.querySelectorAll('#idListe li'))
  .map(e => e.innerText);
  
console.log(result);

<ul id="idListe">
  <li>de l'amour</li>
  <li>de la joie</li>
  <li>des blablous</li>
  <li>des bisous</li>
  <li>des copains</li>
</ul>

Answer 2

这不是for-in的目的。迭代目标的属性名称，而不是属性值。

为回答来自“某些性能”的问题，您commented拥有li项目的 text 。从您最初的问题来看，我认为您自己想要li元素。

为此，您有一些选择：

在ES2015 +中，Array.from：
```
var tab10 = Array.from(collLi, li => li.textContent);
```
Array.from可以轻松地填充到ES2015之前的浏览器中。它从任何类似数组的对象构建一个数组，调用可选的回调以允许它映射值（在这种情况下，是从元素到其文本内容）。

在ES5和更低版本中，Array.prototype.map：

var tab10 = Array.prototype.map.call(collLi, function(li) {
    return li.textContent;
});

在ES2015或更高版本（可迭代NodeList的现代浏览器上，使用扩展符号加上map（但Array.from会更有效）：
```
var tab10 = [...collLi].map(li => li.textContent);
```

或者，如果您想使用for循环，请使用for而不是for-in：

for(var i = 0; i < collLi.length; ++i) {
    tablO.push(collLi[i].textContent);
}

我在上面使用过textContent。如果需要支持IE（IE8和更早版本）的过时版本，则需要选择使用innerText来代替。因此，在上面我有li.textContent的任何地方，您都可以将其替换为li.textContent || li.innerText || ""。

如果要元素而不是文本，则：

在ES2015 +中，Array.from：
```
var tab10 = Array.from(collLi);
```
Array.from可以轻松地填充到ES2015之前的浏览器中。
在ES5和更低版本中，Array.prototype.slice：
```
var tab10 = Array.prototype.slice.call(collLi);
```
在ES2015或更高版本的现代浏览器上，其中NodeList是可迭代的，使用扩展符号：
```
var tab10 = [...collLi];
```

或者，如果您想使用for循环，请使用for而不是for-in：

for(var i = 0; i < collLi.length; ++i) {
    tablO.push(collLi[i]);
}

旁注：此：

var liste = document.querySelector('#idListe');
var collLi = liste.children;

可以替换为

var collLi = document.querySelectorAll('#idListe > *');

，或者在这种情况下，

var collLi = document.querySelectorAll('#idListe > li');

Javascript-从列表中制作数组

2 个答案: