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
 }

У меня есть свойства, а не childs.Я думаю, что мне нужно опросить 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.Он повторяет имя свойства цели, а не значения свойства.

В ответ на вопрос из CertainPerformance, вы прокомментировали , что вы хотите текст из li пунктов.Исходя из вашего исходного вопроса, я подумал, что вам нужны сами элементы li.

Для этого у вас есть несколько вариантов:

1. В ES2015 +, Array.from:

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

   Array.from может быть легко заполнен для браузеров до ES2015.Он строит массив из любого похожего на массив объекта, вызывая необязательный обратный вызов, чтобы позволить ему отобразить значения (в данном случае, от элемента к его текстовому содержимому).

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

---

Если бы вы хотели элементы, а не их текст, то:

1. В ES2015 + Array.from:

   var tab10 = Array.from(collLi);
   

   Array.from можно легко заполнить для браузеров до ES2015.

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');