DOM über Javascrift ändern
realtec
- javascript
Hallo, ich will in einem HTML Dokument über DOM die <img> Tags, bzw. die Bilder durch das alt-tag ersetzten. Wie ist das möglich?
Danke im voraus!
hallo realtec,
Hallo, ich will in einem HTML Dokument über DOM die <img> Tags, bzw. die Bilder durch das alt-tag ersetzten. Wie ist das möglich?
<img> ist ein "tag", "alt" ist ein Attribut. Du kannst nicht das eine durch das andere ersetzen, genausowenig, wie du bei der Straßenbahn mal eben in die Stromleitung einsteigen und die bisherigen Wagen zu Stromleitungen umerklären kannst.
DOM hat zwar durchaus etwas mit Javascript zu tun. Aber auch da verwechselst du Ursprung und Wirkung. Wenn du mit Javascript auf DOM zugreifen möchtest, ist das dasselbe, als ob du willst daß ein Ei neuerdings eine Henne ausbrüten soll. Du greifst massiv in die Schöpfungsgeschichte ein.
Grüße aus Berlin
Christoph S.
....
<img> ist ein "tag", "alt" ist ein Attribut. Du kannst nicht das eine durch das andere ersetzen, genausowenig, wie du bei der
....
Christoph S.
Oh, da habe ich mich verschrieben. Ich will das bild natürlich durch den wert des alt-attributes ersetzten. Der Sinn sei mal dahingestellt... Möglich müsste es aber sein, oder?
Hallo realtec,
Ich will das bild natürlich durch den wert des alt-attributes ersetzten. Der Sinn sei mal dahingestellt... Möglich müsste es aber sein, oder?
ich würde mal sagen, ja: du holst dir mit http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName() die img-Elemente, dann holst du dir mit http://de.selfhtml.org/javascript/objekte/node.htm#get_attribute@title=getAttribute() den Wert des alt-Attributes. Dann kannst du mit http://de.selfhtml.org/javascript/objekte/node.htm#replace_child@title=replaceChild() den "img-Knoten" durch einen Textknoten ersetzen. Ob das allerdings wirklich funktioniert, musst du schon selber ausprobieren :-)
Grüße aus Nürnberg
Tobias
Hallo nochmal,
*argh* ref kennt anscheinend kein @title, deswegen der Text nochmal mit normalen Links:
ich würde mal sagen, ja: du holst dir mit getElementsByTagName() die img-Elemente, dann holst du dir mit getAttribute() den Wert des alt-Attributes. Dann kannst du mit replaceChild() den "img-Knoten" durch einen Textknoten ersetzen. Ob das allerdings wirklich funktioniert, musst du schon selber ausprobieren :-)
Grüße aus Nürnberg
Tobias
Hallo,
ich würde mal sagen, ja: du holst dir mit getElementsByTagName() die img-Elemente, dann holst du dir mit getAttribute() den Wert des alt-Attributes. Dann kannst du mit replaceChild() den "img-Knoten" durch einen Textknoten ersetzen. Ob das allerdings wirklich funktioniert, musst du schon selber ausprobieren :-)
Genau so funktioniert das, wobei man beachten muss, dass die Anzahl der img-Elemente selbst durch die Prozedur stetig gegen 0 veraendert wird und man den alt-Attributwert zunaechst in einen Textknoten ueberfuehren muss und diesen dann gegen den jeweiligen img-Elementknoten ersetzen kann, z. B. in dieser Art (Aktion startet nach 3 Sekunden):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 01/05</title>
<script language="JavaScript" type="text/javascript">
<!--
function Test()
{
var imgs=document.getElementsByTagName("img");
var body=document.getElementsByTagName("body").item(0);
var anz=imgs.length;
for(i=anz-1;i>=0;i--)body.replaceChild(document.createTextNode(imgs.item(i).getAttribute("alt")),imgs.item(i));
}
//-->
</script>
</head>
<body onload="setTimeout('Test()',3000)">
<img src="bla1.gif" alt="bla1">
<img src="bla2.gif" alt="bla2">
<img src="bla3.gif" alt="bla3">
</body>
</html>
Zur Demonstration des Prinzips wurde auf den Test der Methoden-Verfuegbarkeit verzichtet.
MfG, Thomas
Hi,
function Test()
{
var imgs=document.getElementsByTagName("img");
var body=document.getElementsByTagName("body").item(0);
var anz=imgs.length;
for(i=anz-1;i>=0;i--)body.replaceChild(document.createTextNode(imgs.item(i).getAttribute("alt")),imgs.item(i));
Das setzt voraus, daß die Bilder alle Kinder des body sind - oder funktioniert replaceChild auch mit Nachfahren beliebiger Generation?
Ich würde eher mit imgs.item(i).parentNode das parent-Element des jeweiligen img-Elements ermitteln und dessen Kind ersetzen.
cu,
Andreas
Hallo,
Das setzt voraus, daß die Bilder alle Kinder des body sind ...
Davon bin ich mal testweise ausgegangen.
Ich würde eher mit imgs.item(i).parentNode das parent-Element des jeweiligen img-Elements ermitteln und dessen Kind ersetzen.
Guter Punkt:
for(i=anz-1;i>=0;i--)imgs.item(i).parentNode.replaceChild(document.createTextNode(imgs.item(i).getAttribute("alt")),imgs.item(i));
Passt z. B. auf diese Bilder in ihrem jeweiligen Kontext:
...
<body onload="setTimeout('Test()',3000)">
<img src="bla1.gif" alt="bla1">
<div><img src="bla2.gif" alt="bla2"></div>
<div><a href="bla.htm"><img src="bla3.gif" alt="bla3"></a></div>
</body>
...
MfG, Thomas