SVGSVGElement: 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 Methode getElementById() des SVGSVGElement-Interfaces durchsucht das SVG-Dokument-Fragment (d.h. die Suche ist auf einen Teilbaum des Dokuments beschränkt) nach einem Element, dessen id-Eigenschaft mit der angegebenen Zeichenkette übereinstimmt.

Syntax

js
getElementById(id)

Parameter

id

Die ID des Elements, das gesucht werden soll. Die ID ist eine Groß-/Kleinschreibung beachtende Zeichenkette, die innerhalb des SVG-Dokument-Fragments eindeutig sein muss; nur ein Element sollte eine gegebene ID besitzen.

Rückgabewert

Ein Element-Objekt, das das DOM-Element-Objekt beschreibt, das der angegebenen ID entspricht, oder null, wenn kein passendes Element im SVG-Dokument-Fragment gefunden wurde.

Beispiele

Abrufen eines Elements mittels ID

html
<svg
  id="exampleSVG"
  width="200"
  height="200"
  xmlns="http://www.w3.org/2000/svg">
  <circle id="circle1" cx="100" cy="100" r="50" fill="blue" />
</svg>
<button id="getElementButton">Get Element</button>
<p id="elementDisplay"></p>
js
const svgElement = document.getElementById("exampleSVG");
const getElementButton = document.getElementById("getElementButton");
const elementDisplay = document.getElementById("elementDisplay");

getElementButton.addEventListener("click", () => {
  const circleElement = svgElement.getElementById("circle1");
  if (circleElement) {
    elementDisplay.textContent = `Element found: ${circleElement.tagName}`;
  } else {
    elementDisplay.textContent = "Element not found.";
  }
});

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGSVGElement__getElementById

Browser-Kompatibilität