wie erreicht man ein Div in foreignObjekt

[effel]

Hallo Freunde,

mein svg steht mit polyline - keine Probleme. ich habe in svg dann ein foreignObjekt gelegt und darin ein div. funktioniert auch

Jetzt will ich das div erreichen - Schwierig!

1. das funktioniert: alert(document.getElementsByTagName("div").length)
   das nicht:
   alert(document.getElementsByTagName("div")[9].tagname) alert(document.getElementsByTagName("div")[9].nodename)

2 dann mit id: das funktioniert: alert(document.getElementById("dp9").outerHTML)
alert(document.getElementById("dp9").innerText)
hat nicht: alert(document.getElementById("dp9").getAttribute("visibility")) das div hat:<div... visibility:visible>

damit brach alles zusammen: document.getElementById("dp9").setAttribute("visibility","hidden"))

Vielleicht weiß jemand Rat.

mit Gruß Effel

[Matthias Scharwies]

Servus!

Hallo Freunde,

mein svg steht mit polyline - keine Probleme. ich habe in svg dann ein foreignObjekt gelegt und darin ein div. funktioniert auch

Jetzt will ich das div erreichen - Schwierig!

    const svg = document.querySelector('svg');
    const foreignObject = svg.querySelector('foreignObject');
    const firstDiv = foreignObject.querySelector('div'); 

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo effel,

alert(document.getElementsByTagName("div")[9].tagname)
alert(document.getElementsByTagName("div")[9].nodename)

alert(document.getElementsByTagName("div")[9].tagName)
alert(document.getElementsByTagName("div")[9].nodeName)

JavaScript ist genauso case-sensitive wie SVG.

alert(document.getElementById("dp9").getAttribute("visibility")) 

visibility ist eine CSS-Eigenschaft, kein HTML Attribut.

alert(document.getElementById("dp9").style.visibility)

Warum ist .style.visibility auch rot? Weil ich weder in Firefox noch in Chrome ein style-Property vorfinde, wenn ich ein div in einem foreignObject im Zugriff habe. Das style-Attribut wird ebenfalls ignoriert.

In Firefox kann man immerhin eine class setzen und im Stylesheet darauf Bezug nehmen. Chrome ignoriert auch das class-Attribut.

Nach einem längeren Diskurs mit der Websuche und dann auch einer AI scheint das kein Bug, sondern Absicht zu sein. HTML-Elemente in foreignElement sind offenbar deutlich eingeschränkt.

Spinne ich oder hat ChatGPT da mal nicht halluziniert?

Rolf