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

Die getElementById()-Methode der SVGSVGElement-Schnittstelle durchsucht das SVG-Dokumentfragment (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 zu lokalisierenden Elements. Die ID ist eine auf Groß- und Kleinschreibung achtende Zeichenkette, die innerhalb des SVG-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 SVG-Dokumentfragment gefunden wurde.

Beispiele

Abrufen eines Elements nach 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getElementById

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support