javascript - que - GetElementByID-ID múltiples

get element by id value

Question

doStuff(document.getElementById("myCircle1" "myCircle2" "myCircle3" "myCircle4"));

Esto no funciona, entonces, ¿necesito una coma o punto y coma para que esto funcione?

Answer 1

No, no funcionará.

document.getElementById() método document.getElementById() solo acepta un argumento.

Sin embargo, siempre puede establecer clases para los elementos y usar getElementsByClassName() lugar. Otra opción para los navegadores modernos es usar el método document.querySelectorAll() :

document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4");

Answer 2

Esto no funcionará, getElementById consultará solo un elemento por tiempo.

Puede usar document.querySelectorAll("#myCircle1, #myCircle2") para consultar más de un elemento.

ES6 o más nuevo

Con la nueva versión de JavaScript, también puede convertir los resultados en una matriz para trasladarlo fácilmente.

Ejemplo:

const elementsList = document.querySelectorAll("#myCircle1, #myCircle2");
const elementsArray = [...elementsList];

// Now you can use cool array prototypes
elementsArray.forEach(element => {
    console.log(element);
});

Cómo consultar una lista de IDs en ES6

Otra forma fácil si tiene un conjunto de ID es utilizar el idioma para crear su consulta, por ejemplo:

const ids = [''myCircle1'', ''myCircle2'', ''myCircle3''];
const elements = document.querySelectorAll(ids.map(id => `#${id}`).join('', ''));

Answer 3

La mejor manera de hacerlo, es definir una función y pasarle un parámetro del nombre de la ID que desea obtener del DOM, luego cada vez que quiera tomar una ID y almacenarla dentro de una matriz, entonces puede llamar a la función

<p id="testing">Demo test!</p>

function grabbingId(element){
    var storeId = document.getElementById(element);

    return storeId;
}


grabbingId("testing").syle.color = "red";

Answer 4

No sé si algo como esto funciona en js, en PHP y Python, que uso muy a menudo es posible. Tal vez solo use para bucle como:

function doStuff(){
    for(i=1; i<=4; i++){
        var i = document.getElementById("myCiricle"+i);
    }
}

Answer 5

Para mi funcionaba algo defectuoso como este

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);

Answer 6

Puedes hacerlo con document.getElementByID Aquí es cómo.

function dostuff (var here) {
  if(add statment here) {
  document.getElementById(''First ID''));
  document.getElementById(''Second ID''));
  }
}

¡Ahí tienes! xD

Answer 7

Puedes usar algo como esta matriz y para bucle.

<p id=''fisrt''>??????</p>
<p id=''second''>??????</p>
<p id=''third''>??????</p>
<p id=''forth''>??????</p>
<p id=''fifth''>??????</p>
<button id="change" onclick="changeColor()">color red</button>
<script>

    var ids = [''fisrt'',''second'',''third'',''forth'',''fifth''];

    function changeColor() {
        for (var i = 0; i < ids.length; i++) {
          document.getElementById(ids[i]).style.color=''red'';
 }
    }
</script>

Answer 8

Sugiero usar métodos de matriz ES5:

["myCircle1","myCircle2","myCircle3","myCircle4"] // Array of IDs
.map(document.getElementById, document)           // Array of elements
.forEach(doStuff);

Luego se doStuff a doStuff una vez para cada elemento y recibirá 3 argumentos: el elemento, el índice del elemento dentro de la matriz de elementos y la matriz de elementos.

Answer 9

Use jQuery o similar para obtener acceso a la colección de elementos en una sola oración. Por supuesto, debes poner algo como esto en la sección "head" de tu html:

<script type=''text/javascript'' src=''url/to/my/jquery.1.xx.yy.js'' ...>

Así que aquí está la magia:

.- Primero de todo supongamos que tienes algunos divs con IDs como escribiste, es decir,

 ...some html...
 <div id=''MyCircle1''>some_inner_html_tags</div>
 ...more html...
 <div id=''MyCircle2''>more_html_tags_here</div>
 ...blabla...
 <div id=''MyCircleN''>more_and_more_tags_again</div>
 ...zzz...

.- Con este ''hechizo'' jQuery devolverá una colección de objetos que representan todos los elementos div con ID que contienen la cadena completa "myCircle" en cualquier lugar:

 $("div[id*=''myCircle'']")

¡Esto es todo! Ten en cuenta que te deshaces de detalles como el sufijo numérico, que puedes manipular todos los divs en una sola frase, animarlos ... ¡Voilá!

 $("div[id*=''myCircle'']").addClass("myCircleDivClass").hide().fadeIn(1000);

¡Prueba esto en la consola de scripts de tu navegador (presiona F12) ahora mismo!

Answer 10

Vulgo tiene la idea correcta en este hilo. Creo que su solución es la más fácil de todas, aunque su respuesta podría haber sido un poco más profunda. Aquí hay algo que me funcionó. He proporcionado un ejemplo.

<h1 id="hello1">Hello World</h1>
<h2 id="hello2">Random</h2>
<button id="click">Click To Hide</button>

<script>

  document.getElementById(''click'').addEventListener(''click'', function(){
    doStuff();
  });

  function doStuff() {
    for(var i=1; i<=2; i++){
        var el = document.getElementById("hello" + i);
        el.style.display = ''none'';
    }
  }

</script>

Obviamente, simplemente cambie los números enteros en el bucle for para tener en cuenta, sin embargo, la cantidad de elementos a los que está apuntando, que en este ejemplo fue 2.

Answer 11

document.getElementById() solo admite un nombre a la vez y solo devuelve un solo nodo, no una matriz de nodos. Tienes varias opciones diferentes:

1. Podría implementar su propia función que toma múltiples ID y devuelve múltiples elementos.
2. Podría usar document.querySelectorAll() que le permite especificar múltiples ID en una cadena de selector CSS.
3. Podría poner nombres de clase comunes en todos esos nodos y usar document.getElementsByClassName() con un solo nombre de clase.

Ejemplos de cada opción:

doStuff(document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4"));

o:

// put a common class on each object
doStuff(document.getElementsByClassName("circles"));

o:

function getElementsById(ids) {
    var idList = ids.split(" ");
    var results = [], item;
    for (var i = 0; i < idList.length; i++) {
        item = document.getElementById(idList[i]);
        if (item) {
            results.push(item);
        }
    }
    return(results);
}

doStuff(getElementsById("myCircle1 myCircle2 myCircle3 myCircle4"));

Answer 12

document.getElementById() solo toma un argumento. Puede darles un nombre de clase y usar getElementsByClassName() .

Answer 13

getElementByID es exactamente eso: obtenga un elemento por id.

Tal vez usted quiera dar a esos elementos una clase circle y getElementsByClassName()