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

BCD tables only load in the browser