XML-Anfänge -> element.appendChild()

somunium

Aktives Mitglied
Thread Starter
Dabei seit
16.01.2008
Beiträge
523
Reaktionspunkte
35
Hallo.

Ich hab angefangen, mich mit XML als Ersatz für HTML auseinanderzusetzen.
Hintergrund ist eine logischere Struktur im DOM-Baum (Es handelt sich nicht um ein klassisches Homepageprojekt, daher ist das ganze schon angebracht :))

Jetzt harperts aber am Verständnis, was das DOM und vor allem die Methode appendChild() angeht. Letztere funktioniert irgendwie nicht :noplan:

Das ganze befindet sich auch im Internet unter:
http://www.somunia.de/emomu/index.xml

Hier mein Code:

XML:
HTML:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="tpl.xsl" ?>
<database>
	<db_info>
		<db_name>testdb</db_name>
		<db_type>mysql</db_type>
	</db_info>
	<db_tables>
		<table>
			<table_name>Tabelle1</table_name>
			<table_type>innodb</table_type>
			
			<table_fields>
				<field>
					<field_name>t1_field1</field_name>
					<field_type>integer</field_type>
					<primarykey />
				</field>
				<field>
					<field_name>t1_field2</field_name>
					<field_type>varchar</field_type>
					<field_length>30</field_length>
				</field>
			</table_fields>
			
			<connections>
			</connections>
		</table>

	</db_tables>
</database>

JavaScript:
PHP:
window.onload = function(){	// INIT-Funktion!!!
	tables = document.getElementsByTagName('table');

	for(var tmp in tables){
		onload_tables(tables[tmp]);
	}
}
function onload_tables(table_object){	
	var drawplane = document.createElement('drawplane');
	drawplane.onmousedown = function(){
		movechoose(table_object);
	}
	table_object.appendChild(drawplane);
}

XSL (der Vollständigkeit halber):
HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
	<html>
		<head>
			<script src="main.js" type="text/javascript"></script>
			<link rel="stylesheet" type="text/css" href="css.css" />
		</head>
		<body>
  			<xsl:apply-templates />
		</body>
	</html>
</xsl:template>

<xsl:template match="db_info">
</xsl:template>

<xsl:template match="db_tables">
	<xsl:for-each select="table">
	<div class="table">
		<xsl:value-of select="table_name" />
		<ul class="fields">
			<xsl:apply-templates />
		</ul>
	</div>
	</xsl:for-each>
</xsl:template>


<xsl:template match="table_fields">
	<xsl:for-each select="field">
		<li class="field">
			<img src="dat/img/connectpoint.png" class="connector_left" />
			<img src="dat/img/pfeil-rechts.png" />
			<xsl:value-of select="field_name" />
			<img src="dat/img/connectpoint.png" class="connector_right" />
		</li>
	</xsl:for-each>
</xsl:template>

<xsl:template match="connections">
</xsl:template>

<xsl:template match="table_name">
</xsl:template>
<xsl:template match="table_type">
</xsl:template>


<xsl:template match="draw_plane">
	<div class="drawplane"></div>
</xsl:template>






</xsl:stylesheet>


Das ganze befindet sich auch im Internet unter:
http://www.somunia.de/emomu/index.xml


Was mein Problem ist:
Ich bekomme, wenn ich die Seite aufrufe, in der JS-Fehlerkonsole den Fehler, dass das 'table_object' die Methode 'appendChild()' nicht hat.

Was mich verwundert, da ich genau dieses Beispiel vorher in HTML umgesetzt hatte, und da klappte es. an der Programmlogik habe ich nichts verändert.

Via google hab ich leider nichts gefunden, was mit weiterhilft, irgendwie nutzen alle anderen (Lehr-)Scripte, die ich gefunden habe genau diese Methode, aber einen wirklichen Unterschied zu meinem konnte ich nicht erkennen, zumindest nicht, was die drin hatten, was mir fehlen könnte...

Vielleicht hat ja wer noch ein Tutorial für XML und JavaScript parat, ich denke, wenn ich diese Grundlegende Barriere gebrochen hab, kann's endlich losgehen :D

mfg
Lukas
 
Zuletzt bearbeitet:
Ein Array hat keine Funktion "appendChild". Und document.getElementByTagName gibt ein Array wieder und kein Objekt.

Was willst Du denn machen? Willst Du der Tabelle eine weitere Zeile hinzufügen? Wenn ja, musst Du das table-Tag "auslesen" und dem etwas hinzufügen.

Aber so richtig schlau werde ich aus Deinem Code nicht.
 
Ein Array hat keine Funktion "appendChild". Und document.getElementByTagName gibt ein Array wieder und kein Objekt.

Stimmt. Deshalb mit einer Leerzeile Abstand auch die for-in Schleife, welches die Rückgabe von document.getElementsByName() durchläuft, und die Funktion onload_tables() mit dem table-Objekt als Parameter aufruft.


Ich möchte keine weitere Zeile anfügen, sondern ein Element vom Typ 'drawplane' (was auch in der XSL beschrieben ist).
 
Ich würde dir empfehlen einen JS-Debugger benutzen(z.B. Firebug für den Firefox oder Drosera für Webkit) und gucken, was da überhaupt passiert. "table_object" ist in deinem Fall nämlich 0.

document scheint übrigens auf die generierte HTML-Datei zu verweisen und nicht auf die XML-Datei. Und da gibts kein Element namens "table".
 
Zuletzt bearbeitet:
Stimmt... Der greift nicht auf das XML, sondern auf das erzeugte HTML zurück...

Das ist ja mal doof :hum:
Heißt, das, was ich vorhabe, geht gar nicht...
 
Zurück
Oben Unten