Skip to main content
se añadieron 1563 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve una colección de todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.

EDIT

Añado snipped para mayor claridad y uniendo a mi solución la que propuso @Iñigo Irigoyen Erquicia:

function change(color) {

  var elements = document.getElementsByClassName("color");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor=color;
  }
 

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>
<div class="color"></div>
<div class="color"></div>

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve una colección de todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve una colección de todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.

EDIT

Añado snipped para mayor claridad y uniendo a mi solución la que propuso @Iñigo Irigoyen Erquicia:

function change(color) {

  var elements = document.getElementsByClassName("color");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor=color;
  }
 

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>
<div class="color"></div>
<div class="color"></div>

No es realmente un array, aunque se parezca
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve un array conuna colección de todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve un array con todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve una colección de todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.

se añadieron 230 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve un array con todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve un array. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

La diferencia radica en lo que devuelve cada uno de los métodos:

Por id

document.getElementById("color");

La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.

Por clase

document.getElementsByClassName("color");

La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve un array con todos los elementos que posean dicha clase. Por ello, para poder referenciar a <div id="color"></div> deberías hacer:

document.getElementsByClassName("color")[0];

Con esto accederías al primer elemento que salga en el DOM de tu página y que tenga la clase "color". En tu caso, al tener solamente uno estarías referenciándolo correctamente.

cuerpo editado
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38
Loading
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38
Loading