1

Tengo un pequeño problema.

Quiero asignar un valor a un div con diferentes clases, necesito cambiar el de arriba por el de abajo

<div class="product-container text-center product-block" itemscope itemtype="https://schema.org/Product">

<div class="product-container text-center product-block" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

Estoy probando primero a añadir un ID y si funciona añadir después la información necesaria, pero no logro hacerlo. Aquí mi código JS

function myFunction() {
 var guru = document.getElementsByClassName('product-container text-center product-block');
 var guru = document.setAttribute("id", "democlass"); 
}

4 respuestas 4

1

el método getElementsByClassName lo que retorna es un elemento de tipo Nodelist, lo que pasa aquí es que selecciona todos los elementos con la clase que hallas colocado en este caso getElementsByClassName('product-container text-center product-block'), lo que pasa aquí es que selecciona todos los elemento con esas dos clases y la forma para acceder a ellos es diferente a la de ungetElementById ya que hay que considerar que puedes tener mas de un elemento con la misma clase, asi que para acceder a algún elemento es atraves de un array, no usando la variables sola sino como un array con la posición del elemento, para dejarlo mas en claro aquí esta el ejemplo en código.

guru[0].setAttribute("id", "democlass");

no

var guru = document.setAttribute("id", "democlass");

y si hay mas de un elemento se utilizan sus otras posiciones pertinentes como 1,2,3,4,etc.

0

Viendo tu código estas declarando dos veces la misma variable, lo que tienes que hacer es primero obtener tu elemento y guardardo en una variable, puedes utilizar document.getElementsByClassName lo cual te regresa un arreglo con todos los elementos que tienen esas clases. Si solo buscas un elemento, te recomiendo utilizar document.getElementById el cual solo te va a regresar el elemento que tenga ese Id.

Ya que tienes tu elemento guardado en una variable, podrás utilizar la función setAttribute como lo estas haciendo.

Un ejemplo para tu código quedaría así:

Tu elemento con las clases product-container text-center product-block:

<div class="product-container text-center product-block" itemscope itemtype="https://schema.org/Product">

La funcion que busca el elemento y le modifica el atributo itemtype:

function myFunction() {
 var elem = document.getElementsByClassName('product-container text-center product-block');
 elem[0].setAttribute("itemtype", "https://schema.org/ListItem"); 
}

Presta atención en el uso de [0] lo que hace esto es obtener el primer elemento del arreglo retornado por documento.getElementsByClassName si quisieras modificar todos los elementos, lo tendrás que hacer con cada elemento dentro del arreglo.

0

elementos = document.getElementsByClassName('miClass'); // este buscara todos los elementos con esa clase y no solo uno
/**
 * Puedes asignar un id al primer elemento de esta forma
 **/
elementos[0].setAttribute('id', 'miId');
console.log(elementos);
<div class="miClass">
<div class="miClass"> 
<div class="miClass">

0

Puedes utilizar también document.querySelectorAll que de igual forma te trae un array de los elementos HTML que coincidan con el nombre, clase, etc., y accedes a ellos por medio del índice:

     var guru = document.querySelectorAll('.product-container.text-center.product-block');
    console.log(guru[0]);
console.log(guru[1]);

guru[0].setAttribute('itemtype','https://schema.org/ListItem');
<div class="product-container text-center product-block" itemscope itemtype="https://schema.org/Product">

<div class="product-container text-center product-block" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.