Diferencia entre document.getElementById y document.getElementsByClassName

En particular, ¿por qué funciona document.getElementsById aquí?

add padding
function movefun() { document.getElementById("move").style.paddingLeft = "50px"; }

pero document.getElementsByClassName no funciona

 
add padding
function movefun() { document.getElementsByClassName("move").style.paddingLeft = "50px"; }

He omitido las cosas comunes como html y body tag para reducir la longitud del código.

Porque getElementsByClassName devuelve un objeto similar a una matriz de todos los elementos secundarios que tienen todos los nombres de clase dados.

Use esto en su lugar si quiere hacerlo por clase

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

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

O si desea hacerlo a todos los elementos de la clase, use un ciclo

DEMO 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"; } } 

getElementById devuelve un único elemento DOM cuyo ID coincide con su consulta. getElementsByClassName devuelve una HtmlCollection , una estructura similar a una matriz que contiene los elementos DOM que coinciden con su consulta. Debe iterar a través de cada elemento en la matriz para aplicar su estilo.

 document.getElementById("move") returns html element document.getElementsByClassName("move") returns html collection 

style es una propiedad del elemento html, por lo tanto, funciona bien con getElementById

Para referencia –

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

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

Queremos obtener el elemento único y asignarlo en una variable, esto se puede hacer mediante el uso de getElementById. Pero cuando queremos obtener todos los elementos de los productos y asignarlos a una variable, básicamente estamos usando getElementByClassName.