Javascript-从列表中制作数组

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()转换为数组，然后映射到数组：

 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是。 迭代目标的属性名称 ，而不是属性值。

在回答来自“某些性能”公司的问题时，您评论说您拥有li项目的文本 。 从您最初的问题来看，我认为您想要li元素本身。

为此，您有一些选择：

1. 在ES2015 +中， Array.from ：

    var tab10 = Array.from(collLi, li => li.textContent); 

   Array.from可以轻松地Array.from之前的浏览器中。 它从任何类似数组的对象构建一个数组，调用可选的回调以允许其映射值（在这种情况下，从元素到其文本内容）。

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

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

3. 在ES2015或更高版本的现代浏览器（其中NodeList可迭代）上，使用扩展符号加map （但Array.from会更有效）：

    var tab10 = [...collLi].map(li => li.textContent); 

4. 或者，如果要使用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 || "" li.textContent || li.innerText || "" li.textContent || li.innerText || "" 。

---

如果您想要元素而不是文本，那么：

1. 在ES2015 +中， Array.from ：

    var tab10 = Array.from(collLi); 

   Array.from可以轻松地Array.from之前的浏览器中。

2. 在ES5和更早版本中， Array.prototype.slice ：

    var tab10 = Array.prototype.slice.call(collLi); 

3. 在ES2015或更高版本中，在可迭代使用NodeList的现代浏览器上，请使用扩展符号：

    var tab10 = [...collLi]; 

4. 或者，如果要使用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');