разница между document.getElementById и document.getElementsByClassName

Question

В частности, почему работать document.getElementsById здесь

<div id="move">add padding</div> 

<button type="button" onclick="movefun()">pad</button> 

<script> 
function movefun() { 
    document.getElementById("move").style.paddingLeft = "50px"; 
} 
</script> 

но document.getElementsByClassName не работает

<div class="move">add padding</div> 

<button type="button" onclick="movefun()">Set left padding</button> 

<script> 
    function movefun() { 
     document.getElementsByClassName("move").style.paddingLeft = "50px"; 
    } 
</script> 

Я ушел из общих вещей, как тег html и body, чтобы сократить длину кода.

Answer 1

Поскольку getElementsByClassNameвозвращает массив типа объект ll дочерних элементов, которые имеют все указанные имена классов.

Используйте это вместо того, чтобы, если вы хотите сделать это с помощью класса

DEMO 1 ->http://jsfiddle.net/1r0u5d3o/2/

document.getElementsByClassName("move")[0].style.paddingLeft = "50px";

Или, если вы хотите сделать это для всех элементов класса, использовать цикл

ДЕМО 2 ->http://jsfiddle.net/1r0u5d3o/1/

function movefun() { 
    var elements = document.getElementsByClassName("move"); 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].style.paddingLeft = "50px"; 
    } 
} 

Answer 2

document.getElementById("move") returns html element 

document.getElementsByClassName("move") returns html collection 

style является свойством элемента HTML, следовательно, отлично работает с getElementById

Для справки -

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Answer 3

getElementById возвращает один элемент DOM, идентификатор которого соответствует вашему запросу. getElementsByClassName возвращает HtmlCollection - массивную структуру, содержащую элементы DOM, которые соответствуют вашему запросу. Вы должны перебирать каждый элемент в массиве, чтобы применить свой стиль.

Answer 4

Мы хотим получить уникальный элемент и выделить его в переменной, это можно сделать, используя getElementById. Но когда мы хотим получить все элементы продуктов и выделить их в переменной, то в основном мы используем getElementByClassName.