DocumentFragment: getElementById() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die getElementById() Methode des DocumentFragment gibt ein Element Objekt zurück, das das Element darstellt, dessen id-Eigenschaft mit der angegebenen Zeichenkette übereinstimmt. Da Element-IDs eindeutig sein müssen, falls sie angegeben sind, sind sie eine nützliche Möglichkeit, schnell Zugriff auf ein bestimmtes Element zu erhalten.

Falls Sie Zugriff auf ein Element benötigen, das keine ID hat, können Sie querySelector() verwenden, um das Element mit einem beliebigen Selektor zu finden.

Hinweis: IDs sollten innerhalb eines Dokumentfragments einzigartig sein. Wenn zwei oder mehr Elemente in einem Dokumentfragment die gleiche ID haben, gibt diese Methode das erste gefundene Element zurück.

Syntax

getElementById(id)

Hinweis: Die Groß- und Kleinschreibung von "Id" im Namen dieser Methode muss korrekt sein, damit der Code funktioniert; getElementByID() ist nicht gültig und wird nicht funktionieren, so natürlich es auch erscheinen mag.

Parameter

id: Die ID des zu findenden Elements. Die ID ist eine groß- und kleinschreibungssensitive Zeichenkette, die innerhalb des Dokumentfragments eindeutig sein sollte: Nur ein Element sollte eine bestimmte ID haben.

Rückgabewert

Ein Element Objekt, das das DOM-Element beschreibt, das mit der angegebenen ID übereinstimmt, oder null, falls kein übereinstimmendes Element im Dokumentfragment gefunden wurde.

Beispiele

Eine Liste von Elementen erweitern

In diesem Beispiel enthält das Dokument eine Liste mit einem einzigen Eintrag Cherry. Wir erstellen ebenfalls ein Dokumentfragment, das vier weitere Einträge enthält: Apple, Orange, Banana und Melon.

Wir protokollieren dann das Ergebnis der Verwendung von getElementById(), um nach Apple und Cherry im Dokument und im Fragment zu suchen. Zu diesem Zeitpunkt erscheint Cherry nur im Dokument während Apple nur im Fragment erscheint.

Wenn Sie auf „Fragment zum Dokument hinzufügen“ klicken, fügen wir das Fragment der Liste im Dokument hinzu und protokollieren erneut das Ergebnis der Suche nach sowohl Apple als auch Cherry im Dokument und im Fragment. Dieses Mal erscheinen sowohl Apple als auch Cherry im Dokument und keiner im Fragment.

Dies liegt daran, dass das Anhängen eines Fragments an ein Dokument die Knoten des Fragments in das DOM verschiebt und ein leeres DocumentFragment zurückbleibt.

HTML

html

<button id="add">Add fragment to document</button>
<button id="reset">Reset example</button> <br />
List content:
<ul>
  <li id="Cherry">Cherry</li>
</ul>
Fragment content:
<ul id="fragment"></ul>
Current status:
<pre id="log" />

button {
  margin-bottom: 10px;
}

JavaScript

// Create the document fragment with its initial content
const fragment = new DocumentFragment();
["Apple", "Orange", "Banana", "Melon"].forEach((fruit) => {
  const li = document.createElement("li");
  li.textContent = fruit;
  li.id = fruit;
  fragment.append(li);
});

// When the button is clicked, add the fragment to the list
document.getElementById("add").addEventListener("click", () => {
  document.querySelector("ul").append(fragment);
  displayStatus();
});

// Log the results of both getElementById()
function displayStatus() {
  const log = document.getElementById("log");
  log.textContent = "";
  ["Apple", "Cherry"].forEach((id) => {
    log.textContent += `document.getElementById("${id}") ${
      document.getElementById(id) ? "Yes" : "No"
    }\n`;
    log.textContent += `fragment.getElementById("${id}") ${
      fragment.getElementById(id) ? "Yes" : "No"
    }\n`;
  });

  // Empty the fragment viewer and fill it with the current content
  const fragmentViewer = document.getElementById("fragment");
  while (fragmentViewer.hasChildNodes()) {
    fragmentViewer.removeChild(fragmentViewer.lastChild);
  }
  for (entry of fragment.children) {
    fragmentViewer.appendChild(entry.cloneNode(true));
  }
}

// Log the initial state
displayStatus();

// Hook the reset button
document.getElementById("reset").addEventListener("click", () => {
  document.location.reload();
});

Ergebnis

Spezifikationen

Specification
DOM Standard # dom-nonelementparentnode-getelementbyid

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Document.getElementById()