How do I loop through all the children in htmlcollections?

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!