getElementsByClassName не возвращает все элементы

Question

Я создаю кнопку для выделения определенных слов в указанном классе, но у меня возникают проблемы с возвратом всех элементов в классе.Это будет работать, только если я укажу индекс, поэтому я предполагаю, что может быть что-то не так с существующим циклом for.Любая помощь приветствуется!

Это будет работать, но, конечно, только "выделяет" первый элемент в классе:

var bodyText = document.getElementsByClassName('test')[0].innerHTML;
for (var i = 0; i < searchArray.length; i++) {
bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, 
highlightEndTag);}

document.getElementsByClassName('test')[0].innerHTML = bodyText;  
return true;

Это не будет работать вообще:

var bodyText = document.getElementsByClassName('test').innerHTML;
for (var i = 0; i < searchArray.length; i++) {
bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, 
highlightEndTag);}

document.getElementsByClassName('test').innerHTML = bodyText;  
return true;

Answer 1

Как видите, getElementsByClassName множественно (Элементы). Действительно, один и тот же класс может быть назначен нескольким элементам HTML. Вы не найдете никакого способа пропустить [0], и в любом случае не должны этого делать, так как это может означать, что вы получаете данные с неправильного узла. Если вам нужны данные от определенного элемента, который вы можете гарантировать, что он уникален, тогда вам нужно дать ему идентификатор и использовать вместо него getElementById.

Answer 2

Если вы хотите заменить несколько слов в нескольких элементах, вам нужно два цикла:

const testElements = document.getElementsByClassName('test');
for (const element of testElements) {
    for (const search of searchArray) {
        element.innerHTML = doHighlight(element.innerHTML, search, highlightStartTag, highlightEndTag);
    }
}

Answer 3

Вы не можете получить доступ к innerHTML в чем-то, что возвращает htmlcollection

document.getElementsByClassName('test').innerHTML

, потому что оно написано простым английским языком: getElementsByClassName. множественное число .

"Elements".

с "s" в конце ...

означает, что это (своего рода) массив ( htmlcollection )