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

Question

У меня есть следующий код яваскрипта (чистый JS, не ЛИЭС), однако, когда его запуска он возвращает только один элемент вместо двух

function changeButtonStyles() { 
    var actualButtons = document.getElementsByClassName("read-more"); 
    for (var i = 0; i < actualButtons.length; i++) { 
     actualButtons[i].parentNode.className = "basic"; 
     actualButtons[i].className = "btn btn-xs btn-default"; 
    } 

Он должен вернуть два элемента из страницу, поэтому я могу изменить их оба, но он возвращает только один или цикл только итерации через один. Почему это?

jsfiddle

Answer 1

Попробуйте выбрать все элементы с помощью метода

document.querySelectorAll(".read-more"); 

Я обновляю скрипку https://jsfiddle.net/rzdkr2gL/7/

И вы можете использовать метод forEach

actualButtons.forEach(function (el) { 
    el.parentNode.className = "basic"; 
    el.className = "btn btn-xs btn-default"; 
}) 

или (рекомендуемый способ)

Array.prototype.forEach.call(actualButtons, function (el) { 
    el.parentNode.className = "basic"; 
    el.className = "btn btn-xs btn-default"; 
}) 

или

NodeList.prototype.forEach.call(actualButtons, function (el) { 
    el.parentNode.className = "basic"; 
    el.className = "btn btn-xs btn-default"; 
}) 

Окончательный код может быть выглядит как https://jsfiddle.net/rzdkr2gL/8/