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 dem angegebenen String übereinstimmt. Da Element-IDs, wenn sie angegeben sind, einzigartig sein müssen, sind sie eine nützliche Möglichkeit, schnell auf ein bestimmtes Element zuzugreifen.

Wenn Sie auf ein Element zugreifen müssen, das keine ID hat, können Sie querySelector() verwenden, um das Element mit einem beliebigen Selector zu finden.

Hinweis: IDs sollten innerhalb eines Dokumentfragments eindeutig 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ßschreibung 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 lokalisierenden Elements. Die ID ist ein case-sensitiver String, der innerhalb des Dokumentfragments eindeutig ist: Nur ein Element sollte eine gegebene ID haben.

Rückgabewert

Ein Element-Objekt, das das DOM-Elementobjekt beschreibt, das mit der angegebenen ID übereinstimmt, oder null, wenn 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 außerdem 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 keines von beiden im Fragment.

Dies liegt daran, dass das Anhängen eines Fragments an ein Dokument die Knoten des Fragments in das DOM verschiebt, was ein leeres DocumentFragment hinterlässt.

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"></pre>

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 # dom-nonelementparentnode-getelementbyid

Browser-Kompatibilität

Siehe auch

Document.getElementById()