web-dev-qa-db-de.com

GetElementByID - Mehrere IDs

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

Das funktioniert nicht, also brauche ich ein Komma oder ein Semikolon, damit das funktioniert?

24

document.getElementById() unterstützt jeweils nur einen Namen und gibt nur einen einzelnen Knoten und kein Array von Knoten zurück. Sie haben verschiedene Möglichkeiten:

  1. Sie können Ihre eigene Funktion implementieren, die mehrere IDs benötigt und mehrere Elemente zurückgibt.
  2. Sie könnten document.querySelectorAll() verwenden, um mehrere IDs in einer CSS-Auswahlzeichenfolge anzugeben.
  3. Sie können auf allen Knoten einen gemeinsamen Klassennamen angeben und document.getElementsByClassName() mit einem einzigen Klassennamen verwenden.

Beispiele für jede Option:

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

oder:

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

oder:

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"));
49
jfriend00

Dies funktioniert nicht, getElementById fragt nur ein Element nach Zeit ab.

Sie können document.querySelectorAll("#myCircle1, #myCircle2") verwenden, um mehr als ein Element abzufragen.

ES6 oder neuer

Mit der neuen Version von JavaScript können Sie die Ergebnisse auch in ein Array konvertieren, um sie problemlos zu transversieren.

Beispiel:

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

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

So fragen Sie eine Liste von IDs in ES6 ab

Eine andere einfache Möglichkeit, wenn Sie ein Array von IDs haben, ist die Verwendung der Sprache zum Erstellen Ihrer Abfrage. Beispiel:

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

Nein, das geht nicht.

document.getElementById() Die Methode akzeptiert nur ein Argument.

Sie können jedoch immer Klassen für die Elemente festlegen und stattdessen getElementsByClassName() verwenden. Eine weitere Option für moderne Browser ist die Verwendung der querySelectorAll() -Methode:

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

Ich empfehle die Verwendung von ES5-Array-Methoden:

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

Dann wird doStuff für jedes Element einmal aufgerufen und erhält 3 Argumente: das Element, den Index des Elements innerhalb des Elementarrays und das Elementarray.

2
Oriol

Ich weiß nicht, ob so etwas in js funktioniert, in PHP und Python, die ich oft benutze, ist es möglich. 

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

Vulgo hat die richtige Idee in diesem Thread. Ich glaube, dass seine Lösung die einfachste von allen ist, obwohl seine Antwort etwas tiefer sein könnte. Hier ist etwas, was für mich funktioniert hat. Ich habe ein Beispiel gegeben.

<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>

Offensichtlich ändern Sie einfach die ganzen Zahlen in der for-Schleife, um alle Elemente zu berücksichtigen, auf die Sie abzielen, die in diesem Beispiel 2 waren.

1
Dan Zuzevich

getElementByID ist genau das - erhalte ein Element nach ID.

Vielleicht möchten Sie diesen Elementen eine circle-Klasse und getElementsByClassName

1
sachleen

document.getElementById() nimmt nur ein Argument an. Sie können ihnen einen Klassennamen geben und getElementsByClassName() verwenden. 

1
MuhammadHani

Am besten definieren Sie dazu eine Funktion und übergeben einen Parameter mit dem Namen der ID, den Sie aus dem DOM holen möchten. Jedes Mal, wenn Sie eine ID holen und in einem Array speichern möchten, können Sie dies tun rufen Sie die Funktion auf

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

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

    return storeId;
}


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

Sie können etwas wie dieses Whit-Array und eine for-Schleife verwenden.

<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>
1

Verwenden Sie jQuery oder ähnliches, um in nur einem Satz auf die Sammlung von Elementen zuzugreifen. Natürlich müssen Sie so etwas in den "head" -Abschnitt Ihrer HTML-Datei einfügen: 

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

Also hier ist die Magie:

- Als Erstes nehmen wir an, Sie haben einige Divs mit IDs, wie Sie geschrieben haben, d. H.

 ...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...

Mit diesem 'Zauber' gibt jQuery eine Sammlung von Objekten zurück, die alle div-Elemente darstellen, deren IDs den gesamten String "myCircle" enthalten, und zwar an beliebiger Stelle:

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

Das ist alles! Beachten Sie, dass Sie Details wie das numerische Suffix loswerden, dass Sie alle Divs in einem einzigen Satz bearbeiten und animieren können ... Voilá!

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

Beweisen Sie das jetzt in der Skriptkonsole Ihres Browsers (drücken Sie F12)!

Wie von jfriend00 festgestellt, 

document.getElementById () unterstützt jeweils nur einen Namen und gibt nur einen einzelnen Knoten und kein Array von Knoten zurück.

Hier ist jedoch ein Beispielcode, den ich erstellt habe, und Sie können eine oder eine durch Kommas getrennte Liste von IDs angeben. Sie erhalten ein oder mehrere Elemente in einem Array. Bei Fehlern wird ein Array mit einem Fehler als einziger Eintrag zurückgegeben.

function safelyGetElementsByIds(ids){
    if(typeof ids !== 'string') return new Error('ids must be a comma seperated string of ids or a single id string');
    ids = ids.split(",");
    let elements = [];
    for(let i=0, len = ids.length; i<len; i++){
        const currId = ids[i];
        const currElement = (document.getElementById(currId) || new Error(currId + ' is not an HTML Element'));
        if(currElement instanceof Error) return [currElement];
        elements.Push(currElement);
    };
    return elements;
}

safelyGetElementsByIds('realId1'); //returns [<HTML Element>]
safelyGetElementsByIds('fakeId1'); //returns [Error : fakeId1 is not an HTML Element]
safelyGetElementsByIds('realId1', 'realId2', 'realId3'); //returns [<HTML Element>,<HTML Element>,<HTML Element>]
safelyGetElementsByIds('realId1', 'realId2', 'fakeId3'); //returns [Error : fakeId3 is not an HTML Element]
0
Plinderman

Bei mir arbeiteten Fehler so etwas

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);
0
Nicola Mihaita