How do I loop through all the children in htmlcollections?

  • 0
    Good afternoon, tell me how to implement a loop through all tags in html collections?
    I need to change the innerText of each tag to words from another array. Below is the code.

    How to implement a loop through all nested tags and change their text? It is not very convenient to manually prescribe the passage to each one
    document.getElementsByClassName('sidebar__inner')[0].children[0].children[0].children[1].children[0].children[0].children[0].text="documen"


    Here is some work, but here it changes once, that is, it does not reach the internal tags (

    Sample HTML code
    <div id="indexText"></div>
    <!DOCTYPE html>
    <html lang="">
    <head>
      <meta charset="">
      <meta name="viewport" content="width=, initial-scale=">
      <title></title>
    </head>
    <body>
      <div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">Смежные разделы</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/document">Документ</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="/events">Введение в события</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="/event-details">Интерфейсные события</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="/forms-controls">Формы, элементы управления</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="/loading">Загрузка документа и ресурсов</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="/ui-misc">Разное</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">Поделиться</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Flearn.javascript.ru%2Fdocument" rel="nofollow"></a><a class="share share_fb sidebar__share" href="https://www.facebook.com/sharer/sharer.php?s=100&amp;p[url]=https%3A%2F%2Flearn.javascript.ru%2Fdocument" rel="nofollow"></a><a class="share share_vk sidebar__share" href="https://vkontakte.ru/share.php?url=https%3A%2F%2Flearn.javascript.ru%2Fdocument" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/ru.javascript.info/blob/master/2-ui/1-document" rel="nofollow">Редактировать на GitHub</a></div></div></div>
    
    </body>
    </html>


    let a = document.getElementsByClassName('sidebar__inner')[0].innerText;
    console.log(a)
    let array =["Related Sections",
    "Document",
    "Introduction to Events",
    "Interface events",
    "Forms, controls",
    "Download document and resources",
    "Miscellanea",
    "Share",
    "Edit on GitHub"]
    
    Array.from( document.getElementsByClassName('sidebar__inner') )
    .forEach((element, index) => element.innerText = array[index]);


    I would be grateful for any help
    JavaScript Anonymous, Dec 23, 2019

  • 1 Answers
  • 0
    Replace separately links via the .sidebar__link selector and the titles via .sidebar__section-title and there will be no problem.
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!