Я не могу добавить класс и постоянно получать ошибку: не могу прочитать свойство add undefined [duplicate]

Вы используете массив как объект, разница между getElementbyId и getElementsByClassName такова:

• getElementbyId вернет вам объект.
• getElementsByClassName вернет вам массив.

getElementsByClassName

Метод getElementsByClassName(classNames) принимает строку, содержащую неупорядоченный набор уникальных разделенных пробелами маркеры, представляющие классы. При вызове метод должен возвращать живой объект NodeList, содержащий все элементы документа, которые имеют все классы, указанные в этом аргументе, получив классы, разделив строку на пробелы. Если в аргументе нет токенов, тогда метод должен возвращать пустой NodeList.

https://www.w3.org/TR/2008/WD-html5 -20080610 / dom.html # getelementsbyclassname

getElementById

Метод getElementById () обращается к первому элементу с указанным id.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

в вашем коде строки:

1- document.getElementsByClassName ('myElement'). Style.size = '100px';

НЕ будет работать, как ожидалось, потому что getElementByClassName вернет массив, и массив будет НЕ имеет свойство style, вы будете обращаться к каждому element, итерации их.

Вот почему функция getElementById работает на вас, эта функция вернет вам прямой объект, и поэтому вы сможет получить доступ к свойству style.

Он возвращает список, подобный массиву.

Вы делаете этот массив как пример

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);  

Следующее описание взято из этой страницы :

Метод getElementsByClassName () возвращает коллекцию всех элементов в документе с указанным именем класса, так как объект NodeList.

Объект NodeList представляет собой набор узлов. К узлам можно обращаться по номерам индексов. Индекс начинается с 0.

Совет. Вы можете использовать свойство length объекта NodeList для определения количества элементов с указанным именем класса, затем вы можете прокручивать все элементы и извлекать нужную информацию .

Итак, поскольку параметр getElementsByClassName принимает имя класса.

Если это ваше тело HTML:

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

то var menuItems = document.getElementsByClassName('menuItem') вернет коллекцию (а не массив) из трех верхних <div> s, поскольку они соответствуют заданному имени класса.

Затем вы можете перебирать эти узлы (<div> s в этот случай) с помощью:

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

Подробнее о различиях между элементами и узлами см. в этой записи .

Вы можете получить один элемент, запустив

document.querySelector('.myElement').style.size = '100px';

, но он будет работать для первого элемента с классом .myElement.

Если вы хотите применить это для всех элементы с классом я предлагаю вам использовать

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});

ES6 предоставляет метод Array.from() , который создает новый экземпляр Array из объекта, подобного массиву или итерации.

let boxes = document.getElementsByClassName('box');

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

Как вы можете видеть внутри фрагмента кода, после использования функции Array.from() вы можете манипулировать каждым элементом.

Это же решение с использованием jQuery.

$('.box').css({'background':'green'});

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

С ES5 + (любой просматриваемый в настоящее время - 2017) вы должны иметь возможность делать

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});

В других словах

• document.querySelector() выбирает только первый элемент указанного селектора. Поэтому он не выплевывает массив, это одно значение. Подобно document.getElementById(), который извлекает только ID-элементы, поскольку идентификаторы должны быть уникальными.
• document.querySelectorAll() выбирает все элементы с указанным селектором и возвращает их в массиве. Похоже на document.getElementsByClassName() только для классов и document.getElementsByTagName().

Зачем использовать querySelector?

Используется просто для единственной цели легкость и краткость.

Зачем использовать getElement / sBy? *

Более быстрая производительность.

Почему это различие в производительности?

Оба способа выбора имеют целью создание NodeList для дальнейшего использования. querySelectors генерирует статический NodeList с селекторами, поэтому он должен быть сначала создан с нуля. getElement / sBy * немедленно адаптирует существующий живой NodeList текущего DOM.

Итак, когда использовать какой метод зависит от вас / вашего проекта / вашего устройства.

Infos

Демонстрация всех методов Документация NodeList Тест производительности