Как установить значение элементу в HTMLcollections?

Question

[KambulovDanil]

Привет. Я получаю, нужной мне страницы HTMLCollections.

Перебором получаю каждое текстовое значение тега, находящейся в поле innertext.

Array.from( document.getElementsByClassName('content') ).unshift() 
.forEach(element => console.log(element.innerText))

Например у меня есть некоторый массив с текстовыми значениями
let array = ["Text1", "Text2"......]

Как мне реализовать замену текстовых значений(innerText) из HTMLCollections на текстовые значения из массива?

Спасибо большое. Еще вопросик. Как найденному элементу установить новое значение. Возможно добавить в эту конструкцию?

Answer 1

[Алексей Уколов]

(element, index) => element.innerText = array[index]

Comments

[KambulovDanil]

Он почему то меняет только первое вхождения и останавливается. Не подскажите как подправить?

let array =["Related Sections",
"Document",....]


Array.from( document.getElementsByClassName('sidebar__inner') ).
filter((element, index) => element.innerText = array[index])
.forEach(element => console.log(element.innerText));

[Алексей Уколов]

Вы почему filter-то используете?

[KambulovDanil]

Алексей Уколов, Хмм, да на автомате взял. Что лучше использовать?

[Алексей Уколов]

А из каких вариантов вы выбираете?

[KambulovDanil]

Алексей Уколов, хмм, я уже понял что натворил глупостей. Но если даже оставить forEach то все равно работает только первое вхождение

[Алексей Уколов]

Покажите свой код. Убедитесь, что по селектору выбирается больше одного значения. Убедитесь, что в консоли нет ошибок.

[KambulovDanil]

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

Вот JS код

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

Вот результат вывода в консоль.Ошибок нет

Смежные разделы
Документ
Введение в события
Интерфейсные события
Формы, элементы управления
Загрузка документа и ресурсов
Разное
Поделиться
Редактировать на GitHub

[Алексей Уколов]

Ну ведь у вас же один только элемент с классом sidebar__inner.
Вам, наверное, нужно какие-то дочерние элементы в нём выбирать? Короче, проблема в селекторе.

[KambulovDanil]

Ну да, это контейнер в котором находятся текстовые узлы. Первый форич перебирает же массив и выводит их. Но почему он так же не заменяется их всех ? Честно я уже запутался

[Алексей Уколов]

У вас в коде нет «первого форич». В console.log в начале вы выводите содержимое элемента, включая дочерние. Там сохраняются переносы строк, поэтому вам кажется, что лог вывелся несколько раз.

[KambulovDanil]

Array.from( document.getElementsByClassName('sidebar__inner') )
.forEach(element => console.log(element.innerText))

Вот так он выводит все текстовые узлы в консоль

[KambulovDanil]

Алексей Уколов, Но если делать через фор ич замену то он только один раз меняет

[Алексей Уколов]

Пожалуйте убедиться в моей правоте:

Array.from( document.getElementsByClassName('sidebar__inner') )
.forEach(element, index => console.log(index))

Вы увидите в консоли только «0», потому что элемент один.